路由首位使用場景：例如項(xiàng)目中的登錄驗(yàn)證，權(quán)限管理。等等都需要進(jìn)行路由跳轉(zhuǎn)

對此，vue-router 提供的 beforeEach可以方便地實(shí)現(xiàn)全局導(dǎo)航守衛(wèi)（navigation-guards）。

組件內(nèi)部的導(dǎo)航守衛(wèi)函數(shù)使用相同，只是函數(shù)名稱不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。

官方文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

如何設(shè)置一個(gè)全局守衛(wèi)

你可以使用 router.beforeEach 注冊一個(gè)全局前置守衛(wèi)：就是在你router配置的下方注冊

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對象

• from: Route: 當(dāng)前導(dǎo)航正要離開的路由

• next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

  • next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

  • next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應(yīng)的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對象，且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。

  • next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會被終止且該錯(cuò)誤會被傳遞給 router.onError() 注冊過的回調(diào)。

確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。

一個(gè)簡單實(shí)用的小例子：

const router = new VueRouter({ ... }) //這是路由配置，我就不多說了

const whiteList = ['/error', '/register/regindex', '/register/userauthent',  '/register/submit'] // 路由白名單
vueRouter.beforeEach(function(to,from,next){
  console.log("進(jìn)入守衛(wèi)");
  if (userInfo.user_id>0){
      console.log("登錄成功");
      next();   //記得當(dāng)所有程序執(zhí)行完畢后要進(jìn)行next()，不然是無法繼續(xù)進(jìn)行的;
  }else{
      console.log("登錄失敗");
      getUserInfo.then(res => {
          if(res){
              if (res.user_id){
                  if (res.status == 4) {
                      //賬號凍結(jié)
                      next({ path: '/error', replace: true, query: { noGoBack: true } })
                  }
                  if (res.status == 3) {
                      //認(rèn)證審核中
                      next({ path: '/register/submit', replace: true, query: { noGoBack: true } })
                  }
                  next();  //記得當(dāng)所有程序執(zhí)行完畢后要進(jìn)行next()，不然是無法繼續(xù)進(jìn)行的;
              }else{
                  if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進(jìn)入
                      next();  //記得當(dāng)所有程序執(zhí)行完畢后要進(jìn)行next()，不然是無法繼續(xù)進(jìn)行的;
                  }else{
                      next({ path: '/register/regindex', replace: true, query: { noGoBack: true }})
                  } 
              }
              
          }
      }).catch(()=>{
          //跳轉(zhuǎn)失敗頁面
          next({ path: '/error', replace: true, query: { noGoBack: true }})
      })
  }

});

export default router