详解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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
Node 代理访问的实现
Sep 19 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
php二维数组转成字符串示例
2014/02/17 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
jquery attr 设定src中含有&(宏)符号问题的解决方法
2011/07/26 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python制作企业邮箱的爆破脚本
2016/10/05 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
详解Python正则表达式re模块
2019/03/19 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python 动态调用函数实例解析
2019/10/21 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python飞机大战游戏实例讲解
2020/12/04 Python
python自动生成证件号的方法示例
2021/01/14 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
校园十大歌手策划书
2014/02/01 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python