Vue路由鉤子 afterEach beforeEach區別

歸去來兮-不如去兮發表於2018-07-14
Vue路由

​ vue-router作為vue裡面最基礎的服務,學習一段時間,對遇到的需求進行一些總結

使用vue-cli作為開發前提 vue-router已經配置好了

路由寫法

  routes: [
    {
        path: `/cart`,
        name: `cart`,
        component: cart,
        meta :{ title: "購物車"}               //用於給定網頁名
    }
 ]

vue-router 的路由跳轉的方法

第一種 : 程式設計式的導航

<router-link to="/" tag="p">耳機頻道</router-link>
//to是一個prop.指定需要跳轉的路徑,也可以使用v-bind動態設定
//tag可以指定渲染成標籤,預設是a標籤
<router-link to="/" replace>跳轉回去</router-link>   
//這樣的寫法是不會留下歷史痕跡,回退鍵無效
<router-link :to="{ name: `product`, params: { id : 1 }}">User</router-link>
// /product/1

第二種 : 函式式的導航

//這裡假設 我要跳轉product頁面並且附帶引數id  
//這裡定義好了list.id 就是 動態的值
this.$router.push(`./product/` + list.id)                       // 字串的方式進行描述
this.$router.push({name : `product`,params: { id : list.id }})    // 命名的路由的方式進行描述
this.$router.push({ path: `/product/${list.id}` })               // 直接定義path類似第一種
//比較常用的跳轉路由的方法
//假如是帶查詢引數
router.push({ path: `product`, query: { id: list.id }})            // /product?id=1

這個方法會向 history 棧新增一個新的記錄，所以，當使用者點選瀏覽器後退按鈕時，則回到之前的 URL。

當你點選 <router-link> 時，這個方法會在內部呼叫，所以說，點選 <router-link :to="..."> 等同於呼叫 router.push(...)。

值得注意的一點是,如果提供了 path，params 的配置將不會生效

還有一些方法

router.replace      //它不會向 history 新增新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄
router.go(1)        //在瀏覽器記錄裡面前進一步,等於history.forward()
router.go(-1)       //後退一步記錄，等同於 history.back()
router.go(n)        //瀏覽器記錄前進3步

基本使用大概就這麼多
還有 命名檢視 路由重定向 等等需要的請看官網

基本知識大概就這麼多

現在說說正題 afterEach beforeEach這兩個導航守衛的區別

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全域性的, 單個路由獨享的, 或者元件級的。

記住引數或查詢的改變並不會觸發進入/離開的導航守衛。

在全域性守衛裡面

beforeEach 全域性前置守衛

當一個導航觸發時，全域性前置守衛按照建立順序呼叫。

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

  • to: Route: 即將要進入的目標 路由物件
  • from: Route: 當前導航正要離開的路由
  • next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
router.beforeEach((to, from, next) => {
   console.log(to);    //即將要進入的路由物件
   console.log(from);  //當前導航要離開的路由物件
  
   next();             //呼叫該方法,才能進入下一個鉤子
})
//這樣寫就可以明顯的看出每個引數的意義

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

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

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

確保要呼叫 next 方法，否則鉤子就不會被 resolved

afterEach 全域性後置鉤子

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

然而和守衛不同的是，這些鉤子不會接受 next 函式也不會改變導航本身

從使用的角度來說 前置鉤子更加常用,比如登入驗證 以及給Vue單頁面引用規定網頁名等等

router.beforeEach((to,from,next) => {
  if(to.meta.title) {
    document.title = to.meta.title;    //在路由裡面寫入的meta裡面的title欄位
  }
  next();
})

元件內的守衛請看官網的例子

相關文章