Vue router前端路由 2

router.beforeeach()本身需要乙個引數，從原始碼中可知該引數是乙個函式

beforeeach(guard: n**igationguard): function

從原始碼中解讀該guard函式本身同樣包含三個引數（to, from, next）

export type n**igationguard= (
to: route,
from: route,
next: n**igationguardnext) => any

同時引數next本身又是乙個函式：

export type n**igationguardnext= (
to?: rawlocation | false | ((vm: v) => any) | void
) => void

另兩個引數to和from的含義就是：從我們的from跳轉到to，在這個跳轉過程中便可實行我們改變title的操作。

to:即將要進入的目標的路由物件

from:當前導航即將要離開的路由物件

next:呼叫該方法後，才能進入下乙個鉤子

我們要做的是將頁面title賦值為需要跳轉到的介面to的title，然而to裡面沒有title這個屬性，這時候我們再回到原始碼，發現to是乙個route型別，而route型別就是router物件中的乙個個路由對映，所以我們可以給每個路由對映裡加上乙個meta(元資料)屬性，裡面給上頁面元件title

router.beforeeach((to, from, next) => )

然而當存在路由巢狀時，我們的to就會出現問題，因為巢狀的子路由並沒有給它meta元資料，這時除了給子路由加上meta以外，還有另乙個方法取得主路由的meta。

從下圖可以發現，在當前to物件中meta屬性是空的，但是在matched(物件陣列)屬性下的第乙個物件matched[0]中，儲存著我們主路由的meta，所以我們可以修改一下**。來保證獲取到當前頁面的title。

router.beforeeach((to, from, next) => )

之前我們所討論的是router導航守衛的前置守衛(guard)beforeeach，接下來我們來討論一下後置鉤子(hook)aftereach前置守衛是在路由跳轉前**，後置鉤子則是路由跳轉後**

這是後置鉤子的原始碼：(不含next函式)

aftereach(hook: (to: route, from: route) => any): function

後置鉤子的呼叫：

router.aftereach( (to, from) => )

我們上面是用的導航守衛被稱之為全域性守衛keep-alive是vue內建的乙個元件，可以使被包含的元件保留狀態，或避免重新渲染。

route-view也是乙個元件，如果直接被包在keep-alive裡面，所有的路徑匹配到的檢視元件都會被快取

activated和deactivated函式只有元件在keep-alive的情況下可以被呼叫

keep-alive兩個重要的屬性：

*注：像exclude="profile,user"的寫法，逗號後面不能加空格！！

Vue router前端路由 2

Vue 前端路由 vue router

前端路由與vue router

vue 前端路由和vue router

Vue router前端路由 2

Vue 前端路由 vue router

前端路由與vue router

vue 前端路由和vue router

相關推薦