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

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

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

1、全局鉤子

　　你可使用 router.beforeEach 註冊一個全局的 before 鉤子：

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

　　一樣能夠註冊一個全局的 after 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有 next 方法，不能改變導航

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

2、某個路由獨享的鉤子

　　你能夠在路由配置上直接定義 beforeEnter 鉤子：

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

　　這些鉤子與全局 before 鉤子的方法參數是同樣的

3、組件內的鉤子

　　最後，你能夠在路由組件內直接定義如下路由導航鉤子：

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()，至關於一個按鈕開啓同樣。

一、beforeRouteEnter(to,from,next)

        beforeRouteEnter 函數內部 this 是undefined，這是由於在執行路由鉤子函數beforRouteEnter時候，組件尚未被建立出來；先執行beforRouteEnter，再執行組件週期鉤子函數beforeCreate。咱們能夠經過 next 獲取組件的實例對象，如：next( (vm)=>{} )，參數vm就是組件的實例化對象。

二、beforeRouteUpdate(to,from,next)

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

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

三、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>

4、路由鉤子在實際開發中的應用場景

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

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

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

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

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

　　若是頁面內有重要的信息須要用戶保存後才能進行跳轉, 或者有彈出框的狀況. 應該阻止用戶跳轉

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

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

　　當用戶須要關閉頁面時, 能夠將公用的信息保存到session或Vuex中

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