关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
#在切换路由时，组件会被复用，不过，这也意味着组件的生命周期钩子不会再被调用。
解决办法有两种，1简单地watch(监测变化)$route对象：
constUser={
template:'...',
watch:{
'$route'(to,from){
//对路由变化作出响应...
}
}
}
2.使用2.2中引入的beforeRouteUpdate导航守卫：
constUser={
template:'...',
beforeRouteUpdate(to,from,next){
//reacttoroutechanges...
//don'tforgettocallnext()
}
}
#全局守卫
你可以使用router.beforeEach注册一个全局前置守卫：
constrouter=newVueRouter({...})
router.beforeEach((to,from,next)=>{
//...
})
•to:Route:即将要进入的目标路由对象
•from:Route:当前导航正要离开的路由
•next:Function:一定要调用该方法来resolve这个钩子
#全局解析守卫
在2.5.0+你可以用router.beforeResolve注册一个全局守卫。这和router.beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
#全局后置钩子
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受next函数也不会改变导航本身：
router.afterEach((to,from)=>{
//...
})
#路由独享的守卫
你可以在路由配置上直接定义beforeEnter守卫
constrouter=newVueRouter({
routes:[
{
path:'/foo',
component:Foo,
beforeEnter:(to,from,next)=>{
//...
}
}
]
})
这些守卫与全局前置守卫的方法参数是一样的。
#组件内的守卫
你可以在路由组件内直接定义以下路由导航守卫：
constFoo={
template:`...`,
beforeRouteEnter(to,from,next){
//在渲染该组件的对应路由被confirm前调用
//不！能！获取组件实例`this`
//因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to,from,next){
//在当前路由改变，但是该组件被复用时调用
//举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，
//由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
//可以访问组件实例`this`
},
beforeRouteLeave(to,from,next){
//导航离开该组件的对应路由时调用
//可以访问组件实例`this`
}
}
beforeRouteEnter守卫不能访问this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
exportdefault{
data(){
return{
num:18
}
},
beforeRouteEnter(to,from,next){
next(vm=>{
vm.num=22;
})
}
}
注意beforeRouteEnter是支持给next传递回调的唯一守卫。对于beforeRouteUpdate和beforeRouteLeave来说，this已经可用了，所以不支持传递回调，因为没有必要了
#完整的导航解析流程
1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的beforeEach守卫。
4.在重用的组件里调用beforeRouteUpdate守卫(2.2+)。
5.在路由配置里调用beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用beforeRouteEnter。
8.调用全局的beforeResolve守卫(2.5+)。
9.导航被确认。
10.调用全局的afterEach钩子。
11.触发DOM更新。
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。
#在全局导航守卫中检查元字段
router.beforeEach((to,from,next)=>{
if(to.matched.some(record=>record.meta.requiresAuth)){
//如果路由中有meta的requireAuth，且为true，就不进行登录验证，否则进行登录验证
if(!auth.loggedIn()){
next({
path:'/login',
query:{redirect:to.fullPath}
})
}else{
next()
}
}else{
next()//确保一定要调用next()
}
})
一个路由匹配到的所有路由记录会暴露为$route对象(还有在导航守卫中的路由对象)的$route.matched数组。因此，我们需要遍历$route.matched来检查路由记录中的meta字段。
注：1、meta字段就是路由元信息字段，requiresAuth是自己起的字段名称，用来标记这个路由信息是否需要检测，true表示要检测，false表示不需要检测（这个名称随便起，比如我自己的就起的requiresId，建议起个有意义的名称）
2、if(to.matched.some(record=>record.meta.requiresAuth))，如果对这类写法不熟悉，可以去看看es6的箭头函数，这句话就是返回遍历的某个路由对象，我们定义为为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测它的meta对象是不是有requiresAuth这个属性，且为true，如果满足上述条件，就确定了是这个/foo/bar路由。
3、some()方法测试数组中的某些元素是否通过了指定函数的测试。语法：arr.some(callback[,thisArg])；
some为数组中的每一个元素执行一次callback函数，直到找到一个使得callback返回一个“真值”（即可转换为布尔值true的值）。如果找到了这样一个值，some将会立即返回true。否则，some返回false。callback只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。
callback被调用时传入三个参数：元素的值，元素的索引，被遍历的数组。
4、vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可！
总结
以上所述是小编给大家介绍的关于VueRouter中路由守卫的应用及在全局导航守卫中检查元字段的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！