本篇文章给大家带来的内容是关于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')
}
}
})相关推荐：
