キープアライブ、localStorageを、記録vuexキャッシュされたページビュー

ページのキャッシングについて

ページ・キャッシュ要件：

• コンポーネント間のキャッシュのパラメータの受け渡し
• サブページ閲覧履歴キャッシュ
• ブラウザを閉じて、前のページに戻り、再度ログイン

1、キャッシュで使用される部品間を通過するパラメータkeepalive
バインディングrouterキャッシュページ
でapp.vue使用して、ページキャッシュの属性が必須：$route.metakeepAlive

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router.jsで、ルーティングページmetaで追加keepAliveの状態：true/false

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
  		 {
              path: "list",
              name: "list",
              meta: { title: "列表页", type: "list", keepAlive: false },
              component: () =>
                import(/* webpackChunkName: "list" */ "./view/list") //模块化打包，速度更快，包更小
            },
             {
              path: "addList",
              name: "addList",
              meta: { title: "添加列表页", type: "addList", keepAlive: true},
              component: () =>
                import(/* webpackChunkName: "addList" */ "./view/addList")
            },
    ]
  })

注：キープアライブコンポーネントアクティベーションステータス、ページキープアライブコンポーネントを使用し、二回目のレンダリングは、ライフサイクルを実行するために起動されることはありません

2は、サブページのブラウザのキャッシュをvuex使用し
、一般的に逆の操作に使用されるキャッシュサブページのURL、プロジェクトの歴史の中でユーザレコード、;サブページに複数のページを、サブページは、互いの間をジャンプすることができ、いくつかのサブページへ戻ります唯一の固定ページに、そしてlocalstorage私たちが使用するので、ちょうど、需要を満たしていない、前のページをキャッシュするvuexキャッシュを。

3、近くにオープンして、ブラウザのキャッシュを再びlocalstorage
ときジャンプページ、現在のページをキャッシュURLにlocalstorageブラウザを開いて、レコードにジャンプ直接ログインページを開く次の時間

//在main.js的router.beforeEach中做判断和缓存操作
router.beforeEach((to, from, next) => {
	if (to.path !== "/login/login" ) { //不缓存登录页
	    window.localStorage.setItem("login_jump_url", to.path);
	  }
  next();
}