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