Vue路由this.route.push跳转页面不刷新的解决方案
更新时间：2021年07月08日 11:01:07 作者：CoderYin
这篇文章主要介绍了Vue路由this.route.push跳转页面不刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue路由this.route.push跳转页面不刷新
一、背景
介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。
也就是vue生命周期函数没有执行(created、mounted钩子函数)。
案例：
A页面：
B页面：
问题：
当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页面没有执行mounted钩子函数，结果导致mounted函数中查询方法不执行。
二、解决方法：
1、使用activated:{}周期函数代替mounted:{}函数即可。
2、监听路由
// 不推荐、用户体验不好
watch: {
'$route' (to, from) {
// 路由发生变化页面刷新
this.$router.go(0);
}
},
// 该方法会多一次请求
watch: {
'$route' (to, from) {
// 在mounted函数执行的方法，放到该处
this.qBankId = globalVariable.questionBankId;
this.qBankName = globalVariable.questionBankTitle;
this.searchCharpter();
}
},
Vue this.$router.push路由跳转,刷新参数消失
this.$router.push({name:"",params:{id:""}})
name和params搭配刷新参数会消失
this.$router.push({path:"",query:{id:""}})
path和query搭配，刷新页面参数不会消失，query中参数成了url中的一部分
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-03-03
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。本文将在Vue中整合Echarts实现可视化界面，感兴趣的可以了解一下2022-04-04
在vue中，有时候你需要对data中的数据进行处理，或者对抓取的数据进行处理之后再挂载呈现到标签中，这时候你就需要计算属性了，当然看到这里你可能还是不了解那下面我举几个实例并附代码解释2023-03-03
这篇文章主要介绍了Vue 浏览器本地存储,LocalStorage 和 SessionStorage 统称为 WebStorage，存储大小一般支持5mb左右，但是不同的浏览器也有区别，具体内容介绍跟随小编一起看看吧2022-04-04
这篇文章主要为大家详细介绍了vue实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要为大家介绍了Vue中如何优雅的捕获 Promise 异常详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本文2018-09-09
vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式
这篇文章主要介绍了vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue修改props数据报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue.js之slot深度复制的相关资料，文中介绍的很详细，对大家具有一定的参考价值，需要的朋友们来一起看看吧。2017-03-03
最新评论