解决vue-router的beforeRouteUpdate不能触发


Posted in Vue.js onApril 14, 2022

vue-router beforeRouteUpdate不触发

官方对于beforeRouteUpdate的解释如下:

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

不能触发的原因可以看注释的第二、三行,只有动态参数的路径(/foo/1 和 /foo/2这样),才会调用。

我尝试对router动态处理

vue.$router.push({ path: path , query: { t: (new Date()) }});

这个场景下,beforeRouteUpdate成功触发。

可以考虑修改你的router-link写法,加个参数,代码示例如下:

<router-link :to="{path:'/home',query: {t: new Date()}}">首页</router-link>

当然,最主要的是,这个方法是组件内的导航守卫,切换路由组件,按你目前的代码功能来看,如果想触发,

除了router-link要带参数,还需要修改router-view

<keep-alive>
  <router-view></router-view>
</keep-alive>

另外可以采用如下解决办法:

 watch: {
    $route(to, from) {
        console.log(to);
        console.log(from);
    }
  }

同样试用 vue-router路由跳转created不执行,页面不刷新的解决办法 

beforeRouteEnter和beforeRouteUpdate的坑

beforeRouteEnter是新进入的一个路由,比如进入/login登录界面,会触发beforeRouteEnter这个钩子;

而beforeRouteUpdate是路由更新时触发,从主页进入登录界面不会触发这个钩子函数,一个父路由下的子路由跳转会触发这个钩子函数。

Vue.js 相关文章推荐
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
vue的项目如何打包上线
You might like
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
python结合API实现即时天气信息
2016/01/19 Python
python图书管理系统
2020/04/05 Python
Python数据可视化之画图
2019/01/15 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
项目施工员岗位职责
2014/03/09 职场文书
校园安全标语
2014/06/07 职场文书
市场调查策划方案
2014/06/10 职场文书
满月酒邀请函
2015/01/30 职场文书
大学生年度个人总结
2015/02/15 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
Java死锁的排查
2022/05/11 Java/Android
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技
python中使用redis用法详解
2022/12/24 Redis