关于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 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
动态加载js的方法汇总
2015/02/13 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
协议书格式
2014/04/23 职场文书
法制宣传日活动总结
2014/04/29 职场文书
学习方法演讲稿
2014/05/10 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
单位计划生育责任书
2015/05/09 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python