VUE路由鉤子及使用場景

1、路由鉤子

能夠在路由發生變化時進行一些特殊的處理

三類鉤子：
一、全局鉤子
二、某個路由獨享的鉤子
三、組件內鉤子

主要都有三個參數：
to: Route: 即將要進入的路由對象
from: Route: 當前導航正要離開的路由
next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

next(): 進行下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

1. 全局守衛 使用全局路由鉤子，必定要調用next()

import Router from 'vue-router'
 Vue.use(Router)
 const router = new Router()
 router.beforeEach((to,from,next)=>{
    ......
    next()
 })
 router.afterEach((to, from) => {
     ...
 })

當一個導航觸發時，全局前置守衛按照建立順序調用。守衛是異步解析執行，此時導航在全部守衛 resolve 完以前一直處於 等待中

2. 路由獨享的守衛（路由內鉤子）在路由配置上直接定義

export default new Router({
        routes: [
               {
               path: '/',
               name: 'home',
               component: Home,
             beforeEnter: (to, from, next) => {
                    ...
                }
            }
        ]
     })

3. 組件內的守衛（組件內鉤子）

beforeRouteEnter
    beforeRouteUpdate
    beforeRouteLeave
    
     beforeRouteEnter (to, from, next) {
        在渲染該組件的對應路由被 confirm 前調用
        不能獲取組件實例 this，由於當守衛執行前，組件實例還沒被建立
     },
     beforeRouteUpdate (to, from, next) {
        在當前路由改變，可是該組件被複用時調用
        舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
        能夠訪問組件實例 this
     },
     beforeRouteLeave (to, from, next) {
        導航離開該組件的對應路由時調用
        能夠訪問組件實例 this
     }

2、實際開發中的應用場景

一、清除當前組件中的定時器，以避免佔用內存

beforeRouteLeave (to, from, next) {
    clearInterval(this.timer)
    next()
}

二、當前頁面中，有未關閉的窗口，或未保存的內容時，阻止頁面跳轉
三、當用戶關閉頁面時, 將公用的信息保存到session或Vuex中

beforeRouteLeave (to, from, next) {
          localStorage.setItem(name, content
          next()
     }