路由中的鈎子函數

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

三個參數：
to:路由將要跳轉的路徑信息，信息是包含在對像里邊的。
from:路徑跳轉前的路徑信息，也是一個對象的形式。
next:路由的控制參數，常用的有next(true)和next(false)。

一、全局鈎子

你可以使用 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) => {
        // ...
      }
    }
  ]
})

三、組件內的鈎子

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

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()
}