vue导航守卫

根据作用域的不同，vue导航守卫分三种：全局导航守卫、组件内部导航守卫、路由独享守卫

全局导航守卫，在main.js中定义导航守卫

1、router.beforeEach((to, from, next) => { /* must call `next` */ })   //路由跳入前判断
2、router.beforeResolve((to, from, next) => { /* must call `next` */ })  
3、router.afterEach((to, from) => {})  //路由跳出前执行函数，确定后跳出，然后在显示页面；

组件内部导航守卫，只作用于该组件；为啥我一直想叫导航卫士呢，好吧

1、beforeRouteEnter(to,from,next){}      //路由跳入前执行函数,不可访问this.data
2、beforeRouteLeave(to,from,next){}     //路由跳出执行函数，确认后跳出
3、beforeRouteUpload(to,form,next){}    //在当前路由改变，但是该组件被复用时调用

注意，beforeRouteEnter(to,from,next){}无法调用data数据，data为渲染，可以使用next()回调来获取，next(vm=>{ console.log(vm.msg) })

路由独享守卫

定义在routes里面的，作用与制定路由
beforeEnter:(to, from, next)    //路由独享守卫；

导航钩子有3个参数：
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由