位置: 编程技术 - 正文

详解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)

  • 个人所得税申报操作流程2023
  • 资本公积转增资本会引起什么变化
  • 活动策划费属于业务宣传费吗
  • 补贴收入如何入账
  • 金税盘问题
  • 劳务公司涉及的税收
  • 叉车折旧年限是多少年
  • 服装企业销售方式
  • 季度奖需要交税吗
  • 赠品的会计核算内容
  • 住房公积金的会计处理
  • 顺流交易为什么不管是否出售
  • 刷信用卡的手续费去哪了
  • 不动产发票怎么填写
  • 营改增账务处理实例
  • 咨询服务企业发展瓶颈期
  • 什么时候需要计提税金及附加
  • 租赁合同印花税双方都要交吗
  • 预缴税多交了,税务局退吗
  • 员工看病报销要计税吗
  • 违约金收入如何缴税
  • 股权转让缴印花税公司用进账吗
  • 金融企业贷款损失税前扣除
  • 上月销项税额错了怎么修改凭证?
  • 金税三期得死多少企业
  • 非全日制劳动用工扣税
  • 如何维护电脑系统安全?
  • 土地增值税清算方法与技巧
  • linux怎么打开文本文件
  • 公司吸收合并股权
  • 电子商票到期后多少天有效?
  • PHP:realpath_cache_get()的用法_Filesystem函数
  • 发票开具的有哪些原则
  • chormedriver安装
  • 斯诺多尼亚山
  • javascript零基础入门书籍
  • php yii
  • 少收的应收款和应收账款
  • 增值税普通发票查询
  • 不认定为一般纳税人的有哪些
  • 商品流通企业购入的商品采用售价金额法核算的
  • 返利销售的增值税怎么算
  • 客户多付款不要了,多出这部分是哪种收入
  • 小企业会计准则和企业会计准则的区别
  • 解决在sql脚本中怎么写
  • 使用正则表达式提取文本(888)555
  • 企业出售房屋
  • 现金流量表的内部结构怎么算
  • 交耕地占用税如何交
  • 营改增后建筑业怎么开票
  • 用货物抵债如何入账
  • 企业为什么要转移用工风险什么意思
  • 建筑行业挂靠代扣税款如何入账?
  • 小规模纳税人低值易耗品摊销方法
  • 财务费用科目余额
  • 主营业务收入增长率计算公式
  • 收到快递赔付款怎么做账
  • 航天金税税控盘服务电话
  • 存货的实际成本法
  • mmc不能打开文件win10
  • windows启动失败是怎么回事
  • windows xp系
  • windows storage server 2016下载
  • ubuntu怎么安装程序
  • win10 ie桌面图标
  • 升级win10后c盘满了
  • unity3D游戏开发
  • shell 数组变量
  • jquery 列表实现
  • koa nodejs
  • android获取本机ip地址
  • jquery 设置css
  • context和getApplicationContext()介绍
  • android support包
  • animate如何拖动图片
  • 重庆市网上税务局官网
  • 注销外经证需要身份证吗
  • 定额发票作废了还能报销吗
  • 重庆网上社保怎么交
  • 9月份公积金什么时候扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设