解决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设计一个日历表
Dec 03 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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
yii添删改查实例
2015/11/16 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
实例解析php的数据类型
2018/10/24 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
js 编程笔记 无名函数
2011/06/28 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python -v 报错问题的解决方法
2020/09/15 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
三下乡活动方案
2014/01/31 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
物流专业求职信
2014/06/30 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
python中mongodb包操作数据库
2022/04/19 Python
MySQL 数据表操作
2022/05/04 MySQL