Vue導航守衛beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave詳解

Vue導航守衛以我自己的理解就是監聽頁面進入，修改，和離開的功能。每個守衛接受三個參數

1. to: Route: 即將要進入的目標路由對象
2. from: Route: 當前導航正要離開的路由
3. next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。
   next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed （確認的）。

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

next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。

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

確保要調用 next 方法，否則鈎子就不會被 resolved。

Test1：

<template>
  <div>
    test1
    <el-button @click="test2">跳轉</el-button>
  </div>
</template>
 
<script>
  export default {
    name: "Test1",
    methods: {
      test2() {
        this.$router.push({name: "test2", query:{type: false}})
      }
    },
    beforeRouteEnter(to, from, next) {
      console.log("****************Test1****Enter**************");
      console.log('to', to);
      console.log('from', from);
      console.log('next', next);
      next(vm => {
        //因為當鈎子執行前，組件實例還沒被創建
        // vm 就是當前組件的實例相當於上面的 this，所以在 next 方法里你就可以把 vm 當 this 來用了。
        console.log(vm);//當前組件的實例
      });
    },
    beforeRouteUpdate(to, from, next) {
      //在當前路由改變，但是該組件被復用時調用
      //對於一個帶有動態參數的路徑 /good/:id，在 /good/1 和 /good/2 之間跳轉的時候，
      // 由於會渲染同樣的good組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。
      // 可以訪問組件實例 `this`
      console.log("****************Test1*******Update***********");
      console.log(this, 'Update'); //當前組件實例
      console.log('to', to);
      console.log('from', from);
      console.log('next', next);
      next();
    },
    beforeRouteLeave(to, from, next) {
      // 導航離開該組件的對應路由時調用
      // 可以訪問組件實例 `this`
      console.log("****************Test1****Leave**************");
      console.log(this, 'Leave'); //當前組件實例
      console.log('to', to);
      console.log('from', from);
      console.log('next', next);
      next();
    }
  }
</script>
 
<style scoped>
 
</style>

Test2:

<template>
  <div>
    test2
  </div>
</template>
 
<script>
  export default {
    name: "Test2",
    beforeRouteEnter(to, from, next) {
      console.log("****************Test2*********Enter*********");
      console.log(this, 'beforeRouteEnter'); // undefined
      console.log('to', to);
      console.log('from', from);
      console.log('next', next);
      next(vm => {
        //因為當鈎子執行前，組件實例還沒被創建
        // vm 就是當前組件的實例相當於上面的 this，所以在 next 方法里你就可以把 vm 當 this 來用了。
        console.log(vm);//當前組件的實例
      });
    },
    beforeRouteUpdate(to, from, next) {
      //在當前路由改變，但是該組件被復用時調用
      //對於一個帶有動態參數的路徑 /good/:id，在 /good/1 和 /good/2 之間跳轉的時候，
      // 由於會渲染同樣的good組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。
      // 可以訪問組件實例 `this`
      console.log("****************Test2*********Update*********");
      console.log(this, 'beforeRouteUpdate'); //當前組件實例
      console.log('to', to);
      console.log('from', from);
      console.log('next', next);
      next();
    },
    beforeRouteLeave(to, from, next) {
      // 導航離開該組件的對應路由時調用
      // 可以訪問組件實例 `this`
      console.log("****************Test2*********Leave*********");
      console.log(this, 'beforeRouteLeave'); //當前組件實例
      console.log('to', to);
      console.log('from', from);
      console.log('next', next);
      next();
    }
  }
</script>
 
<style scoped>
 
</style>

首先是第一次進入Test1

可以看出當作為首頁進入的時候，beforeRouteEnter方法中

1. to顯示的是當前路由，
2. from顯示name為null，path是"/"
   當離開Test1頁面進入Test2頁面時 將先調用Test1頁面中的beforeRouteLeave方法，再調用Test2中的beforeRouteEnter方法
   
   beforeRouteLeave中

• to顯示的就是去往的路由test2有參數傳遞
• from顯示的是正要離開的路由test1
  
  beforeRouteEnter中
• to里面顯示的就是本頁面test2並且有參數傳遞
• from顯示的是上一個頁面test1
  當離開Test2返回Test1頁面時，先調用Test2頁面中的beforeRouteLeave方法，再調用Test1中的beforeRouteEnter方法
  
  beforeRouteLeave中
• to顯示的是要去的路由test1
• from顯示的是即將離開的路由test2並且有 參數傳遞
  
  beforeRouteEnter中
• to顯示的是本頁面test1
• from中顯示的是上一頁面test2有參數傳遞

由此我們可以總結出

• to: Route: 即將要進入的目標路由對象
• from: Route: 當前導航正要離開的路由
  這是兩個參數的本意 ，我們可以這么理解

當beforeRouteEnter方法時：to可以理解為當前頁面，from為來自哪個頁面，如果是首頁則name為null，path為"/"

當beforeRouteLeave方法時：兩個參數的意思可以跟官網意義相同