router页面缓存

发布时间：2023-07-06 16:04:56 修改时间：2023-07-06 16:04:56 阅读：1240 评论：0 0

一、设置标签


//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();

}

---