vue的router导航守卫使用

一、什么是导航

　　导航就是路由正在发生变化

二、导航守卫、路由守卫、路由的钩子函数

　　路由发生变化时自动触发的一些函数

三、守卫有哪些

　　全局守卫（通过new Router出来的实例进行使用，在router/index.js中进行使用）

　　全局前置守卫：beforeEach()

beforeEach((to, from,next)=> {
    //to 代表着将要去的路由的信息对象
　　// 从from要去to 当前导航正要离开的路由，来自哪个路由
})

　　全局后置守卫： afterEach()

afterEach((to, from,next)=> {

    //to 代表着将要去的路由的信息对象
　　// 从from要去to 当前导航正要离开的路由，来自哪个路由

})

四、路由独享（这个没有亲自实践，抄的...）

new VueRouter({
    routes: [
        {
            path: "/hello",
            component: hello,
            beforEnter: (to, from, next) => {
            
            }
        }
    ]
})

五、我用的比较多的：组件中使用导航守卫（功能比如我在改变路由的时候需要进行一些操作）

1.beforeRouteLeave

2.beforeRouteUpdate

3.beforeRouteEnter

{
    data(){
        return {
            name: "张三"
        }
    },
    beforeRouteLeave(to, from, next){
　　　　　// 参数跟以上说的参数一样，组件内配置的。触发在beforeEnter之后
    },
    beforeRouteUpdate(to, from, next){
　　　　　//在动态路由的时候，参数发生变化时，触发
    },

    beforeRouteEnter(to, from, next){
　　　　　//当离开时第一个触发，在beforeEach之前
    }

}