关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法


Posted in Javascript onDecember 09, 2018

 #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用。

 解决办法有两种,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中路由守卫的应用及在全局导航守卫中检查元字段的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
vue mounted组件的使用
Jun 18 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 #Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
ES6的Fetch异步请求的实现方法
Dec 07 #Javascript
You might like
根德YB400的电路分析
2021/03/02 无线电
10 个经典PHP函数
2013/10/17 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python实现字典的key和values的交换
2015/08/04 Python
python实现井字棋游戏
2020/03/30 Python
python中kmeans聚类实现代码
2018/02/23 Python
python实现简单神经网络算法
2018/03/10 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
毕业生实习鉴定
2013/12/11 职场文书
简历的自荐信
2013/12/19 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
python 详解turtle画爱心代码
2022/02/15 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript