Vue-Router之路由守衛

Vue-路由守衛

一.概念

路由守衛,官網也叫導航守衛,所謂導航,就是路由正在發生變化

路由守衛,主要就是用來通過跳轉或取消的方式守衛導航,在導航過程中,有三種方式可以植入導航

• 全局守衛
• 路由獨享
• 路由組件中

二.守衛類型

1.全局守衛

1.1.全局前置守衛beforeEach

全局前置守衛,可以使用路由的實例註冊一個全局前置守衛

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

此守衛一般用於登錄狀態在未登錄的狀態下,進行守衛,直接跳轉到登錄頁

// 全局路由守衛：會攔截所有的路由跳轉行爲
// 常用於實現登錄攔截
router.beforeEach((to, from, next) => {
  // console.log(to, from)
  // 只對訪問購物車組件的路由跳轉行爲進行攔截
  if (to.fullPath=='/cart' || to.fullPath=='/user') {
    let token = localStorage.getItem('token')
    if(token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

1.2 全局解析守衛

與router.beforeEach差不多,但是區別是,在導航被確認之前,所有組件內守衛和異步路由組件都解析成功之後,纔會被調用

router.beforeResolve((to,from,next)=>{
    
});

1.3全局後置守衛

全局後置守衛,導航已經完成了觸發,不會接受next函數,也不能使用next來改變路由

router.afterEach((to,from)=>{
    //不接受next函數,也無法改變路由
});

2.路由獨享

1.beforeEnter

在某一個路由規則觸發時觸發,所以用法就是在路由規則的配置上觸發一個鉤子函數 beforeEnter()

var router=new VueRouter({
	routes:[
        {
            path:'/index',
            component:Inex,
             //路由獨享
            beforeEnter: (to, from, next) => {

            }
        }
    ]
});

一般用處就是當不需要全局路由守衛時,只需要對一個路由規則進行守衛時使用,看具體場景,開發中,一般全局前置守衛用的比較多

3.組件內的守衛

在組件的配置選項中定義的的鉤子函數

3.1.beforeRouteEnter

在組件內配置的 觸發在beforeEnter之前

不能獲取該組件的實例對象this,因爲此守衛在執行前,組件實例還沒有被創建

此守衛是唯一支持給next傳遞迴調的守衛,雖然無法訪問到組件實例,但是可以通過回調的方式獲取

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

3.2 beforeRouteUpdate

在動態路由的時候,參數發生變化時觸發

在當前的路由改變的時候,也就是此組件被複用時觸發比如帶有動態參數的路徑 /index/:id /index/1跳轉到/index/2的時候會觸發此守衛 可以訪問組件實例this

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

3.3 beforeRouteLeave

當離開時第一個觸發

也就是導航離開這個組件的對應路由時被調用.可以訪問組件實例this

此導航的應用一般用於:比如用戶在還未保存修改前突然離開,改導航可以通過next(false來取消)

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

三完整導航解析流程

1. 導航被觸發。
2. 在失活的組件裏調用 beforeRouteLeave 守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置裏調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件裏調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鉤子。
11. 觸發 DOM 更新。
12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

四.解析流程示例

1.home===>list

• 1./home組件中的beforeRouteLeave
• 2.全局前置beforeEach
• /list配置中觸發beforeEnter
• 4./list組件中的beforeRouteEnter
• 5.全局後置 afterEach

2./details/1===>/details/2

只會觸發是三種

• 1.全局前置 beforeEach
• 2.detail組件中的beforeRouteUpdate
• 3.全局後置 afterEach

五,守衛參數解析

每個守衛方法都接收是三個參數 to from next()

1.to

即將去的目標 通俗來說就是到哪裏去

2.from

即將離開的路由 通俗來說就是從哪裏來

3.next ()

是一個方法,必須調用,一定要調用這個方法來解析,執行效果依賴next方法的調用參數

注意使用時,一定要保證不要造成死循環

此函數的用法

• next() 進行下一個,執行下一步

• next(false) 阻止當前的導航

• next(’/’)後者next({path:’/’})

  跳轉到一個不同的地址,當前的導航中斷,跳轉到一個新的導航

• next(error) 如果傳入的參數是一個Error實例,導航終止,並該錯誤會傳遞給router.onError()註冊過的回調