router页面缓存

一、设置标签

//App.vue 标签
<keep-alive>
      <router-view v-if="this.$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"></router-view>

二、设置路由

// routes 配置
export default [
  {
     
    path: '/',
    name: 'index',
    component: index,
    meta: {
     
      keepAlive: true // 需要被缓存
    }
  }
]

以上就可以简单实现缓存页面的功能了，可能还会有比较复杂的需求，需要动态控制，见下述：

动态控制

//js控制 生命周期中（data()平级）：
beforeRouteLeave(to, from, next) {
     
        // 控制走向的路由缓存状态
        to.meta.keepAlive = false;  
        next();
}