vue組件級路由鈎子函數介紹，及實際應用

　　正如其名，vue-router 提供的導航鈎子主要用來攔截導航，讓它完成跳轉或取消。

　　有多種方式可以在路由導航發生時執行鈎子：全局的、單個路由獨享的、或者組件級的。

一、全局鈎子

　　你可以使用 router.beforeEach 注冊一個全局的 before 鈎子：

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

　　同樣可以注冊一個全局的 after 鈎子，不過它不像 before 鈎子那樣，after 鈎子沒有 next 方法，不能改變導航

router.afterEach(route => { // ...})

二、某個路由獨享的鈎子

　　你可以在路由配置上直接定義 beforeEnter 鈎子：

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...
 } } ] })

　　這些鈎子與全局 before 鈎子的方法參數是一樣的

三、組件內的鈎子

　　最后，你可以在路由組件內直接定義以下路由導航鈎子：

const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應路由被 confirm 前調用 // 不能獲取組件實例 `this` // 因為當鈎子執行前，組件實例還沒被創建
 }, beforeRouteUpdate (to, from, next) { // 在當前路由改變，但是該組件被復用時調用 // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。 // 可以訪問組件實例 `this`
 }, beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調用 // 可以訪問組件實例 `this`
 } }

　　beforeRouteEnter 鈎子 不能 訪問 this，因為鈎子在導航確認前被調用，因此即將登場的新組件還沒被創建。

　　不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，並且把組件實例作為回調方法的參數。

beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實例
 }) }

　　你可以 在 beforeRouteLeave 中直接訪問 this。這個 leave 鈎子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導航。

　　同時注意必須有這個next()，相當於一個按鈕開啟一樣。

1、beforeRouteEnter(to,from,next)

        beforeRouteEnter 函數內部 this 是undefined，這是因為在執行路由鈎子函數beforRouteEnter時候，組件還沒有被創建出來；先執行beforRouteEnter，再執行組件周期鈎子函數beforeCreate。我們可以通過 next 獲取組件的實例對象，如：next( (vm)=>{} )，參數vm就是組件的實例化對象。

2、beforeRouteUpdate(to,from,next)

        About組件是有二級導航的，在切換二級導航的時候，對應的內容是在變化的；但是about組件是復用的，只會生成一次，切換二級導航的時，如何知道導航在更新呢？

        一個組件有二級導航的時候，點擊二級導航的時候導航路徑更新了，會觸發路由鈎子函數beforeRouteUpdate。

3、beforeRouteLeave(to,from,next)

        當在about切換到user時，about頁面有些數據還沒有加載完成，這時候我們不讓它切換到user。

<template>
    <div> 我是about <hr>
        <ul class="subnave f-cb">
            <!-- a標簽中href屬性不需要寫地址，頁面編譯完成后自動會在href中加入對應的路勁 -->
            <router-link :to='{name:"About"}' exact tag="li">
                <a>study</a>
            </router-link>
            <router-link :to='{name:"Work"}' tag="li">
                <a>work</a>
            </router-link>
            <router-link :to='{name:"Hobby"}' tag="li">
                <a>hobby</a>
            </router-link>
        </ul> 測試數據：{{test}} <router-view></router-view>
    </div>
</template>

<script> export default { data(){ return { test:'改變之前' } }, beforeCreate(){//組件生命周期函數
            console.log('beforeCreate') }, //當進入組件之前，執行 beforRouteEnter 路由鈎子函數
        beforeRouteEnter(to,from,next){ console.log('beforRouteEnter') console.log(this) // 結果為undefined，因為在執行beforRouteEnter時候，組件還沒有被創建出來；先執行beforRouteEnter，再執行beforeCreate
            next((vm)=>{ //參數vm就是當前組件的實例。
                vm.test = '我被改變了' }) }, beforeRouteUpdate(to,from,next){ console.log('beforeRouteUpdate') next() }, beforeRouteLeave(to,from,next){//離開組件的時候觸發 //什么都不寫的時候，不會離開(走下一步)
 next() } } </script>

四、路由鈎子在實際開發中的應用場景

　　路由鈎子在實際的開發過程中使用較少, 我在實際的項目中只在組件內使用過beforeRouteLeave, 使用場景分別為一下三類情況：

1、清除當前組件中的定時器

　　當一個組件中有一個定時器時, 在路由進行切換的時候, 可使用beforeRouteLeave將定時器進行清楚, 以免占用內存:

beforeRouteLeave (to, from, next) { window.clearInterval(this.timer) //清除定時器
 next() }

2、當頁面中有未關閉的窗口, 或未保存的內容時, 阻止頁面跳轉

　　如果頁面內有重要的信息需要用戶保存后才能進行跳轉, 或者有彈出框的情況. 應該阻止用戶跳轉

beforeRouteLeave (to, from, next) { //判斷是否彈出框的狀態和保存信息與否
 if (this.dialogVisibility === true) { this.dialogVisibility = false //關閉彈出框
  next(false) //回到當前頁面, 阻止頁面跳轉
 }else if(this.saveMessage === false) { //彈出警告
  next(false) //回到當前頁面, 阻止頁面跳轉
 }else { next() //否則允許跳轉
 } }

3、保存相關內容到Vuex中或Session中

　　當用戶需要關閉頁面時, 可以將公用的信息保存到session或Vuex中

beforeRouteLeave (to, from, next) { localStorage.setItem(name, content); //保存到localStorage中
 next() }