详解VueRouter进阶之导航钩子和路由元信息


Posted in Javascript onSeptember 13, 2017

导航钩子

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。

全局钩子

你可以使用 router.beforeEach 注册一个全局的 before 钩子:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局的 before 钩子按照创建顺序调用。钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直处于 等待中。

每个钩子方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next 方法,否则钩子就不会被 resolved。

同样可以注册一个全局的 after 钩子,不过它不像 before 钩子那样,after 钩子没有 next 方法,不能改变导航:

router.afterEach(route => {
 // ...
})

你可以在路由配置上直接定义 beforeEnter 钩子:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

这些钩子与全局 before 钩子的方法参数是一样的。

组件内的钩子

最后,你可以在路由组件内直接定义以下路由导航钩子:

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
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来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
 next(vm => {
  // 通过 `vm` 访问组件实例
 })
}

路由元信息

你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。

定义路由的时候可以配置 meta 字段:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

那么如何访问这个 meta 字段呢?

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航钩子中的 route 对象)的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航钩子中检查 meta 字段:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP类的反射用法实例
2014/11/03 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python数据结构之翻转链表
2017/02/25 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
关于python 跨域处理方式详解
2020/03/28 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
应届生护士求职信
2013/11/01 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
班班通项目实施方案
2014/02/25 职场文书
遗产继承公证书
2014/04/09 职场文书
爱我中华教学反思
2014/04/28 职场文书
法人授权委托书样本
2014/09/19 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
捐款通知怎么写
2015/04/24 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
关于vue-router-link选择样式设置
2022/04/30 Vue.js