详解Vue路由钩子及应用场景(小结)


Posted in Javascript onNovember 07, 2017

一. 路由钩子语法

在vue-router的官方文档中, 将路由钩子翻译为导航守卫, 下面是文档中的内容摘要, 大家也可以通过传送门前往官网阅读详细内容

路由钩子

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠。。好拗口啊。

总体来讲vue里面提供了三大类钩子

1、全局钩子
2、某个路由独享的钩子
3、组件内钩子

三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧

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

(一).全局守卫(全局路由钩子)

你可以使用 router.beforeEach 注册一个全局前置守卫:

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

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

每个守卫方法接受三个参数:

  1. to: Route: 即将要进入的目标 路由对象
  2. from: Route: 当前导航正要离开的路由
  3. next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

注意:使用全局路由钩子, 一定要调用next()!!!

(二).路由独享的守卫(路由内钩子)

你可以在路由配置上直接定义 beforeEnter 守卫:

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

这些守卫与全局前置守卫的方法参数是一样的。

(三). 组件内的守卫(组件内钩子)

最后, 你可以在路由组件中直接定义一下路由导航守卫:

  1. beforeRouteEnter
  2. beforeRouteUpdate (2.2 新增)
  3. 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`
 }
}

二. 路由钩子在实际开发中的应用场景

路由钩子在实际的开发过程中使用较少, 我在实际的项目中只在组件内使用过beforeRouteLeave, 使用场景分别为一下三类情况:

(一) 清除当前组件中的定时器

当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:

beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //清楚定时器
 next()
}

(二) 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转

如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转

beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
  this.dialogVisibility = false //关闭弹出框
  next(false) //回到当前页面, 阻止页面跳转
 }else if(this.saveMessage === false) {
  alert('请保存信息后退出!') //弹出警告
  next(false) //回到当前页面, 阻止页面跳转
 }else {
  next() //否则允许跳转
 }
}

(三) 保存相关内容到Vuex中或Session中

当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //保存到localStorage中
  next()
}

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

Javascript 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
js实现简单选项卡功能
Mar 23 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 #Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
vue环境搭建简单教程
Nov 07 #Javascript
用Webpack构建Vue项目的实践
Nov 07 #Javascript
vue双花括号的使用方法 附练习题
Nov 07 #Javascript
vue组件生命周期详解
Nov 07 #Javascript
Angular2的管道Pipe的使用方法
Nov 07 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
js word表格动态添加代码
2010/06/07 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
总监职责范文
2013/11/09 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
银行求职信个人范文
2013/12/16 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
文明村镇申报材料
2014/05/06 职场文书
清明节寄语2015
2015/03/23 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书