vue-router的幾種用法

1.全局路由守衛

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

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

每個守衛方法接收三個參數：

• to: Route: 即將要進入的目標
  

• from: Route: 當前導航正要離開的路由

• next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

  • next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed (確認的)。

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

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

  • next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回

你也可以注冊全局后置鈎子，然而和守衛不同的是，這些鈎子不會接受 next 函數也不會改變導航本身：

router.afterEach((to, from) => {yi // ... })

二。路由獨享守衛
該路由守衛為當前路由進來前的一次校驗，如果成功，進入當前路由，不成功則不進行跳轉。寫法是在需要守衛的路由下面加beforeEdnter.

 

 三.組件內的路由守衛

可以在單個組件中加入路由鈎子函數

1. beforeRouteEnter(to,from,next) 路由進入前守衛  這里面不能使用this,因為即將登場的組件還沒被創建

2.beforeRouteUpdate（2.2）路由更新

3.beforeRouteLeave 路由離開時

 

 

四。動態創建路由

在有些情況下，根據是否有某些權限創建某些路由，這樣也是一種路由權限的方式

 

 

 五.路由組件的緩存

利用keepalive做組件緩存，保留組件狀態，提高執行效率.

<keep-alive include='a,b'>

　　　<router-view></router-view>

</keep-alive>

使用incloude或者exclude時要給組件設置name

兩個特別的生命周期:actived.  deactived, 只有在用keepalive時組件才會多出這兩個鈎子函數。