详解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 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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
关于php fread()使用技巧
2010/01/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php数组分页实现方法
2016/04/30 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
python操作MongoDB基础知识
2013/11/01 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
创建Django项目图文实例详解
2019/06/06 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python中Yield的基本用法
2020/10/18 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
美国眼镜网站:LensCrafters
2020/01/19 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
会计职业生涯规划书
2014/01/13 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2015年工程师工作总结
2015/04/30 职场文书
校园之声广播稿
2015/08/18 职场文书
爱护环境建议书
2015/09/14 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers