vue中的导航守卫

 //全局的守卫：beforeEach afterEach beforeResolve
    //路由的守卫：beforeEnter
    //组件的守卫：beforeRouteEnter brforeRouteUpdate beforeRouteLeave
    let home={
        template:`<div>这是第{{$route.params.id}}本书</div>`,
        beforeRouteEnter(to,from,next){
            //这个钩子函数执行前还没有创建实例
            console.log(this)//window
            console.log("组件守卫beforeRouterEnter")
           next(a=>{
               //当执行next时，该回调函数没有立即执行，等到当前组件实例创建好了以后，在触发这个回调
               console.log(a);//输出当前实例
           })
        },
        beforeRouteUpdate(to,from,next){
            console.log("组件复用守卫beforeRouteUpdate")
           next()
        },
        beforeRouteLeave(to,from,next){
            console.log("组件离开守卫beforeRouteLeave")
            next()
        }

    };

    let list={
        data(){
            return{}
        },
        template:`<div>这是列表页</div>`
    }


    const routes  =[
        {path:"/home/:id",component:home},{path:"/list",component:list,beforeEnter:(to,from,next)=>{
            console.log("list路由的守卫")
                next()
            }}
    ]
    const router = new VueRouter({
        routes
    });
    // router.beforeEach((to,from,next)=>{
    //     console.log(to)
    //     console.log(from)
    //     console.log(next)
    //     next()
    // })

    //全局的守卫
    //router.beforeEach:全局前置守卫（全局的路由钩子函数），当路由改变时，就会触发这个函数
    router.beforeEach((to,from,next)=>{
        console.log("全局前置守卫beforeRouteEach")
           next()
    })

    //全局解析守卫beforeResolve，它这和router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
    router.beforeResolve((to,from,next)=>{
        console.log("全局解析守卫beforeResolve")
        next()
    })

    //全局后置钩子
    router.afterEach((to,from)=>{
        console.log("全局后置钩子afterEach")
    })




    let vm = new Vue({
        el:"#app",
        data:{
        },
        router
    })