keep-alive, localstorage, vuex cached page views recorded

About page caching

Page cache requirements:

• Cache parameter passing between components
• Sub-page browsing history cache
• Close your browser, log in again return to the previous page

1, parameter passing between the components used in the cache keepalive
binding routercache page
in app.vueusing $route.metathe keepAlivepage cache attributes required:

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

In router.js, the routing page metaadd in the keepAlivestate: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")
            },
    ]
  })

Note: In keepAlive component activation status, use the page keepAlive components, rendering a second time will not be activated to perform life cycle

2, sub-page browser cache used vuex
cache sub-page URL, the user record in the project history, generally used for reverse operation; multiple pages at a sub-page, subpages can jump between each other, some subpages Back only to fixed page, and localstoragecache the previous page just does not meet the demand, so we use the vuexcache.

3, close the browser cache with open again localstorage
when the jump page, cache the current page URLto localstoragethe next time you open the browser and then open the login page directly jump to record

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