时间:2021-07-01 10:21:17 帮助过:5人阅读
本篇文章给大家带来的内容是关于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如何实现监听路由的代码的详细内容,更多请关注Gxl网其它相关文章!