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、在需要使用路由的组件

加上


  
    
  



  

你可能感兴趣的:(前端,vue.js)