Vue.js路由route导航守卫

导航守卫：即在路由发生改变时通过跳转或取消的方式来守卫导航；
注意：参数或查询的改变并不会触发进入/离开的导航守卫；
导航守卫的方式：全局守卫、单个路由守卫、组件守卫。

route.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

const login = () => {
    import(/* webpackChunkName: login */ '../components/login/login.vue')
}
const homePage= () => {
    import(/* webpackChunkName: homePage*/ '../components/home/homePage.vue')
}

Vue.use(VueRouter)
const route = [
    {
        path: '/login',
        name: "登陆",
        component: login 
    },
    {
        path: '/homePage/:id',
        name: "首页",
        component: homePage,
        // 【单个路由守卫】: 当跳转到当前路由时，执行该函数
        beforeEnter (to, from, next) {
            console.log('单个路由守卫 -> beforeEnter ')
            next()
        }
    }
]

export default () => {
    return new VueRouter ({
        route ,
        mode: 'history',
        // 【全局守卫】：即当所有路由发生改变时，首先会执行这2个函数
        // 路由发生改变是最先执行的方法
        beforeEach (to, from, next) {
            // 每次路由跳转之前执行，比如判断用户是否登录(未登录就跳转到登录页)
            // to/from为路由跳转前/后的route对象
            // 在这里可以做相关的判断 ， 再执行next() 或 nexr({path: '/login'})
            next()
            console.log('全局守卫 -> beforeEach ')
        },
        beforeResolve (to, from, next) {
            console.log('全局守卫 -> beforeResolve ')
        },
        afterEach (to, from) {
            // 每次导航跳转之后触发
            console.log('全局守卫 -> afterEach ')
        }   

    })
}

homePage.vue :

<template>
    <div>
        <span> {{a1}}</span>    
    </div>
</template>
<script>
    export default {
        data () {
            return {
                a1: 'homePage'
            }
        },
        // 【组件守卫】
        beforeRouteEnter (to, from, next) {
            // 当进入到当前组件时，首先触发的函数
            console.log(' 组件守卫 -> beforeRouteEnter ')
            next(vm => {
                // 此时这个组件尚未被创建，因此通过this对象拿不到组件的上下文
                // 如果想在这里拿到数据并赋值到该组件中，可以通过next()中的回调函数的vm完成
            })
        },
        beforeRouteUpdate (to, from, next) {
            // 当前路由发生改变时(比如'/homePage/123' => '/homePage/456' )
            console.log(' 组件守卫 -> beforeRouteUpdate ')
            next()
        },
        beforeRouteLeave (to, from, next) {
            // 当离开当前组件跳转到其他路由时触发
            // 比如 用户正在进行表单输入，还没有保存时点击了跳转到其他路由的按钮
            // 此时可以弹出一个提示框，确认用户是否要放弃当前未保存的表单而跳转到新的路由
            console.log(' 组件守卫 -> beforeRouteLeave ')
            next()
        }

    }
</script>

当执行以上代码时，导航守卫打印的顺序为：

全局守卫 -> beforeEach
单个路由守卫 -> beforeEnter
组件守卫 -> beforeRouteEnter
全局守卫 -> beforeResolve
全局守卫 -> afterEach