Vue 实现前进刷新,后退不刷新

amao
1、路由文件配置:

在配置的路由后加上:

meta: { 
    keepAlive: true
}

例如:

{
    path: '/',
    name: 'Home',
    component: () = >import('@/components/Main.vue'),
    meta: {
        keepAlive: true
    }
}
2、main.js文件

添加

router.beforeEach((to, from, next) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  if (toDepth < fromDepth) {
    console.log('后退。。。')
    from.meta.keepAlive = false
    to.meta.keepAlive = true
  }
  next()
})
3、在需要使用路由的组件

加上

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件 -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件 -->
</router-view>
阅读 3.1k

不学无术的大三狗一只

25 声望
2 粉丝
0 条评论

不学无术的大三狗一只

25 声望
2 粉丝
文章目录
宣传栏