欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-12 10:10:05
...

本篇文章给大家带来的内容是关于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如何实现监听路由的代码的详细内容,更多请关注其它相关文章!

相关标签: 监听路由