编程知识 cdmana.com

Vue - vue-router(路由守衛)

這是我參與11月更文挑戰的第23天,活動詳情查看:2021最後一次更文挑戰

什麼是路由守衛?

當瀏覽器的url發生改變的時候,vue會調用指定的函數,就是路由的聲明周期函數,也叫 路由守衛

幾種路由守衛

組件內守衛、 路由獨享守衛、全局守衛

一、組件內守衛

寫在各個.vue組件內部的,與組件內部的聲明周期函數同級

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

beforeRouteEnter

當路由解析完成,並中指定的組件渲染之前(組件 beforeCreate 之前),不能這裏通過 this 訪問組件實例,需要通過 next 回調來進行調用 ,回調後的vm即實例對象。

beforeRouteEnter (to, from, next) {
    // 不能獲取組件實例  this
    // 因為當守衛執行前,組件實例還沒被創建
  	next(vm => {
      // vm...
    })
}
複制代碼

beforeRouteUpdate

組件內容被調用是觸發、可以訪問組件實例

beforeRouteEnter (to, from, next) {
    // 可以訪問組件實例
}
複制代碼

beforeRouteLeave

導航離開該組件的對應路由時調用

beforeRouteLeave (to, from, next) { 
    // 可以訪問組件實例 this
}
複制代碼

二、路由獨享守衛

可以在路由文件直接定義,一般情况下用不到

routes: [ 
      { 
        path: '/foo', 
        component: Foo, 
        beforeEnter: (to, from, next) => { 
          // ... 
      	}
    	} 
    ] 
複制代碼

三、全局守衛

全局守衛是掛載在 router 對象上的

  • beforeEach
  • beforeResolve
  • afterEach

beforeEach

當一個導航觸發時,全局前置守衛按照創建順序調用

router.beforeEach((to, from, next) => {
    // ...
})
複制代碼

beforeResolve

在所有組件內守衛和异步路由組件被解析之後被調用

router.beforeResolve((to, from, next) => {
  // ...
})
複制代碼

afterEach

導航被確認後調用、沒有next,因為這是最後一步了

router.afterEach((to, from) => {
  // ...
})
複制代碼

路由守衛參數

to

即將要進入的目標 路由對象($route)

from

當前導航正要離開的路由對象($route)

next

路由確認回調函數,類似 Promise 中的 resolve 函數,一定要確保調用 next 函數,但是後續的導航行為將依賴 next 方法的調用參數

next() : 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。next()錶示允許繼續往下執行 next(false) : 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器後退按鈕),那麼 URL 地址會重置到 from 路由對應的地址 next('/') 或者 next({ path: '/' }) : 跳轉到一個不同的地址。當前的導航被中斷,然後進行一個新的導航

router和route

router: 是全局路由的實例,直接指向route/index.js

route:是當前路由的信息,包括url,參數,什麼的

原創不易,轉載注明出處

版权声明
本文为[蓋了帽了]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/11/20211125181405700E.html

Scroll to Top