vue如何实现监听路由的代码

本篇文章给大家带来的内容是关于vue如何实现监听路由的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在vue项目中，一个可行的路由规则很重要，它决定着用户是否有权限进入的路由，已经某些路由在刷新时要跳转等等
这部分代码是使用vue全家桶之一的router完成的，下面看具体实例

const whiteList = ['/login']  // 路由白名单，不需要登录的路由放在这里面
router.beforeEach((to,from,next) => {  // 监听路由刷新进行跳转  
window.addEventListener('load',function () {
    console.log(from.path)    
    console.log(to.path)    
    if (to.path == '/groupwork') {
      next({ path: '/choice_course' })
    }
  })  if (store.state.token) {    
  if (to.path === '/login') { // 如果当前用户输入的是登录路由，那么就定向到 /choice_course 路由
      next('/choice_course')
    } else {      
    if (!store.state.nickname) { // 判断用户信息是否存在，不存在就拉取用户信息
        store.dispatch('GetInfo').then(res => { // 拉取用户信息
          next()
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {  // 发生错误就直接清除token，重新登录
            next({ path: '/login' })
          })
        })
      } else {
        next()
      }
    }
  } else {    
  if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})

相关推荐：

如何使用Vue数据监听方法watch

vue计算属性和监听器案例代码分析

以上是vue如何实现监听路由的代码的详细内容。更多信息请关注PHP中文网其他相关文章！