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 函數也不會改變導航自己：

二。路由獨享守衛
該路由守衛爲當前路由進來前的一次校驗，若是成功，進入當前路由，不成功則不進行跳轉。寫法是在須要守衛的路由下面加beforeEdnter.router.afterEach((to, from) => {yi // ... })

 

 三.組件內的路由守衛

能夠在單個組件中加入路由鉤子函數

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時組件纔會多出這兩個鉤子函數。