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中文網其他相關文章！