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

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>