#在切换路由时，组件会被复用，不过，这也意味着组件的生命周期钩子不会再被调用。
解决办法有两种，1简单地 watch (监测变化) $route 对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫：
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
#全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({ ... }) 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 守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些守卫与全局前置守卫的方法参数是一样的。
#组件内的守卫
你可以在路由组件内直接定义以下路由导航守卫：
const Foo = {
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来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
export default {
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对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可！
总结
以上所述是小编给大家介绍的关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持！
您可能感兴趣的文章:
- 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
- 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
- Vue的路由动态重定向和导航守卫实例
- vue2.0 实现导航守卫的具体用法（路由守卫）
- vue-router 实现导航守卫（路由卫士）的实例代码
- vue 利用路由守卫判断是否登录的方法
- vue2.0 实现导航守卫（路由守卫）
- vue路由导航守卫和请求拦截以及基于node的token认证的方法
- vue路由守卫+登录态管理实例分析
- vue路由守卫及路由守卫无限循环问题详析
