位置: 编程技术 - 正文

详解Vue路由钩子及应用场景(小结)(vue路由跳转的钩子函数什么时候会用到)

编辑:rootadmin

推荐整理分享详解Vue路由钩子及应用场景(小结)(vue路由跳转的钩子函数什么时候会用到),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue路由教程,vue-router路由钩子,vue的路由钩子,vue.js 路由的钩⼦函数,vue-router路由钩子,vue.js 路由的钩⼦函数,vue.js 路由的钩⼦函数,vue路由勾子函数,内容如对您有帮助,希望把文章链接给更多的朋友!

一. 路由钩子语法

在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 注册一个全局前置守卫:

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

to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数详解Vue路由钩子及应用场景(小结)(vue路由跳转的钩子函数什么时候会用到)

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

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

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

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

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

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

beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

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

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

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

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

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

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

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

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

标签: vue路由跳转的钩子函数什么时候会用到

本文链接地址:https://www.jiuchutong.com/biancheng/375888.html 转载请保留说明!

上一篇:Vue-Router来实现组件间跳转的三种方法(vue router routes)

下一篇:vue-router实现组件间的跳转(参数传递)(vue $route $router)

  • 营业现金比率是用经营活动净流入还是经营活动流入
  • 应付职工薪酬明细账模板
  • 住房租金专项附加
  • 转让无形资产增值税
  • 增值税专用发票抵扣期限
  • 职工食堂开支会计处理
  • 企业所得税分公司先报还是总部先报
  • 可抵扣租赁费如何摊销做会计分录呢?
  • 住宿费机打发票税率多少
  • 预提利息属于费用吗
  • 先付一半款财务应该怎么写
  • 旧税号的发票专用章还能使用吗
  • 什么叫项目所在地
  • 个税验证不通过怎么办
  • 企业所得税业务招待费扣除比例
  • 技术转让收入属于主营业务收入吗
  • 利润表所得税费用为负数
  • 利息收入记账凭证格式范本
  • 增值税一般纳税人是什么意思
  • 员工报销现在用什么软件
  • 工会残保金必须缴纳吗
  • 查找我的iphone怎么添加设备
  • 金融资产有哪三类代码
  • 成本法 合并
  • 图解在OS X中管理窗口大小的多种方法
  • linux中ls命令的意思
  • 已认证进项税发票可抵扣么
  • msmpeng.exe 是什么
  • ftp pwd命令
  • 进项发票抵扣途中怎么办
  • 在那高高的草丛里
  • csrss是什么程序
  • php在apache中有哪些工作方式
  • 餐饮行业采购
  • php框架yii
  • 公司报亏损需要交税吗
  • python抓取淘宝店铺商品
  • 房屋租赁费发票备注栏需要写什么?
  • vue3.0用法
  • vue引用类型
  • IndexError: invalid index of a 0-dim tensor. Use `tensor.item()` in Python
  • 赔偿金需要交税么
  • 城镇土地使用税优惠政策
  • 车船税每年都要付吗
  • 一个简单的后台与数据库交互的登录与注册[sql注入处理、以及MD5加密]
  • 一次性计提和一次性支付的区别
  • 研发支出属于什么类
  • 小规模企业跨月发票如何冲红
  • 小规模做账要做应交税费吗
  • mysql数据库查询表命令
  • 数据库系统中,用户通过什么访问数据
  • 计提个税和缴纳个税金额不符的原因
  • 消费税和购置税系重复征税
  • 结转成本按照销售收入来结转,税要怎么算
  • 工会里的钱
  • 股东股权转让印花税 公司承担
  • 综合所得的个人所得税有哪些筹划技巧
  • 因进出口商品引起的收支
  • 认证后的进项税额留抵退税
  • 中小型企业会计
  • 在sql server
  • sqlserver存储过程返回多个结果集
  • win7中任务栏的高度最多可以调整到屏幕的
  • mac怎么切换输入法
  • win7无法启动print spooler服务,错误5
  • soundtrax.exe - soundtrax是什么进程
  • win10系统环境设置
  • sbdrvdet.exe - sbdrvdet是什么进程 有什么用
  • ES6 javascript中class静态方法、属性与实例属性用法示例
  • unity3d官方案例
  • cmd网络管理命令的功能和用法
  • python 堆叠
  • jquery 单页应用
  • javascript entries
  • java项目的命名规则
  • jQuery使用getJSON方法获取json数据完整示例
  • jquery日期控件 datepicker
  • 增值税发票怎么购票
  • 房产税的解读
  • 建立高效的法治实施体系,需要着力解决四个问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设