解决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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue如何清除浏览器历史栈
May 25 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
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
降低PHP Redis内存占用
2017/03/23 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python ansible服务及剧本编写
2017/12/29 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
村党支部书记承诺书
2014/05/29 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python