Vue利用keep-alive实现页面缓存

从首页 -> 页面1，再从页面1 ->首页时，保证首页与离开时一样。（可以缓存具体组件，因项目不涉及，暂不说明）

App.vue

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

router中配置keepAlive，需要缓存为ture，不需要为false

 routes: [{
   path: '/',
   name: 'RootPath',
   meta: {
     keepAlive: true
   },
   component: MainSec
 }, {
   path: '*****',
   name: 'detail',
   meta: {
     keepAlive: false
   },
   component: DetailSec
 }, {
   path: '/404/',
   name: '404',
   component: page404
 }]

可以通过使用activated和deactivated改变参数

• activated：keep-alive 组件激活时调用。
• deactivated：keep-alive 组件停用时调用。

vue keep-alive 文档