关于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 相关文章推荐
jQuery之过滤元素操作小结
Nov 30 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Seajs源码详解分析
2019/04/02 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
Python中的迭代器漫谈
2015/02/03 Python
python中dir函数用法分析
2015/04/17 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python win32 简单操作方法
2017/05/25 Python
python实现外卖信息管理系统
2018/01/11 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
农村改厕实施方案
2014/03/22 职场文书
颁奖晚会主持词
2014/03/25 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
创业计划书之宠物店
2019/09/19 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL