Vue路由变化，页面数据不刷新

最新推荐文章于 2024-08-03 11:24:54 发布
最新推荐文章于 2024-08-03 11:24:54 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ravings_now/article/details/88745519
版权
本文介绍了一个Vue项目中遇到的问题：当通过<router-link>改变路由参数时，页面数据未能自动刷新。问题涉及到Vue2.x、CLI3、express和mongodb的结合使用。通过分析，发现在子组件获取路由参数以及使用watch监听对象方面存在错误。解决方案包括在router.js中调整路由设置和在子组件中修改代码，修正后能正确显示不同路由对应的数据。
摘要由CSDN通过智能技术生成

该demo原码放在github上，不断更新修改。demo组成：Vue2.x(cli3) + express + mongodb，有兴趣的小伙伴可以去看看，可以留下star哦，笔芯

github：https://github.com/ravings/graduation-project

首先，展示问题：Vue路由<router-link>参数变化，页面数据不刷新

发现，右侧数据没有切换。

问题描述：我使用的是element-ui的导航栏组件<el-menu>,复用组件，路由传参并跳转，从服务器api接口获取数据。

问题原因：路由传参后，在子组件获取参数问题和 用watch (监测变化) $route 对象

改前代码：

路由传参：(父组件路由传参)

最低0.47元/天 解锁文章
Ravings_now
关注
专栏目录
Vue路由参数更新但是页面不刷新问题
小柠檬爱编程
09-06 2872
解决方法 一、使用watch属性监听route对象 watch: { $route(to, from) { if (this.$route.query.id && from.path == "/client/index") { this.getAllTypeList(); }, // 对路由变化作出响应... //可以使用$router.go(0)进行刷新,（补充，该方法在ios手机上无效） //可以改用wind
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决 Vue 页面中地址栏参数变更不刷新的问题
最新发布
Hello World
08-03 726
在一次Vue项目开发中，遇到了只改变路由中的参数，路由地址不改变页面数据不刷新的问题。造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。
vue路由改变页面不刷新.
qq_38966984的博客
07-19 541
原理,在<router-view/>中利用v-if先false再true，来刷新<router-view/> 1.你要刷新的组件，中添加如下： 如果没有请添加watch侦查器,如果有在watch中添加如下内容: watch:{ '$route':function(){ this.reload(); } } 2.在App.vue中添加如下内容: ...
vue 路由参数变化，页面数据不更新 解决方法
qq_43593142的博客
02-24 993
路由参数改变： http://localhost:8080/?#/PerformanceReview?pid=157811552224000029 http://localhost:8080/?#/PerformanceReview?pid=157803611191800025 参数切换后，页面没刷新，数据没更新 解决方法： 监听路由变化，若参数改变，则重新加载数据，刷新页面 watch: { ...
vue 检测路由变化_解决vue 路由变化页面数据不刷新的问题
weixin_35338559的博客
01-30 816
每天记录一点点，把我遇到的问题记录下来， 希望可以帮助到更多和我遇到同样问题的人。问题描述：通过调接口，动态显示帮助页面的问题列表， 问题列表有多级，当点击的这个问题没有下一级问题的时候跳入内容页。问题出在，我在电脑上做移动端页面的时候，相继跳到详情页，我想返回，点击按钮，直接跳转到了如上第一张图的样子，no,no,no,这不是我想要的结果，此刻，想到了通过改变url来改变页面的层级问题。一级的p...
路由变化，页面不刷新问题
Mr. Ding的小博客
01-11 430
给app.vue 加个key，用watch监听$route变化 <template> <div id="app" :key="key"> <keep-alive> <router-view /> </keep-alive> </div> </template> <script> export default { name: "app", components.
vue在App.vue文件中监听路由变化刷新页面操作
10-14
总体来说，Vue在App.vue文件中监听路由变化刷新页面操作涉及了多个方面的技术点，包括Vue Router的使用、JavaScript的事件监听、Vue的生命周期管理以及组件间的通信。理解这些知识点有助于开发者更好地维护和开发Vue...
vue 解决路由只变化参数页面组件不更新问题
10-16
此外，如果你发现需要在多个组件中处理类似的问题，可以考虑使用全局的路由守卫（router guards）来统一处理路由变化，而不是在每个组件中都添加`watch`。例如，你可以使用`beforeRouteUpdate`导航守卫来监听路由的...
Vue路由切换页面不更新问题解决方案
10-15
在使用Vue.js进行单页面应用开发时，经常遇到页面刷新不更新的问题。这个问题通常出现在使用vue-router进行页面路由切换时，尤其是当路由切换所涉及的组件相同时。这种情况下，Vue不会重新创建组件实例，而是复用已...
vue 路由跳转 页面数据并没有更新，如何解决
weixin_61334593的博客
11-01 4687
vue 路由跳转 页面数据并没有更新，如何解决
vue通过router地址传参跳转同一路由页面，页面不刷新的解决办法
weixin_54122176的博客
03-14 4965
记录一下最近遇到的vue路由页面间的跳转的问题，其中就涉及到了不同路由的跳转（/a/b1 => /a/b2）、相同路由不同参数间的跳转（/a/b?c=2）、相同页面锚点跳转（/a/b#id1 =>/a/b#id2）解决：可以在不刷新的页面通过监听route,重新加载数据。原因：渲染的是同一组件。
vue 路由改变页面不刷新问题
Jana Jing的分享
07-22 293
在 App.vue文件添加以下代码: mounted() { // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件 window.addEventListener('hashchange', () => { let currentPath = window.location.hash.slice(1) if (this.$route.path !== currentPath) { this.$router.
vue 同一个页面地址栏参数改变，页面不刷新的解决方案
aichimaodeyuybh的博客
08-12 2062
在vue项目开发中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。监听地址栏变化（watch），这是vue-router官方给出的解决办法。监听路由变化，把初始化的方法重新写到监听的方法里面执行。
【vue3】监听路由的写法以及路由更新但是页面内容不更新的解决方案
bbt953的博客
05-29 2296
监听路由的写法以及路由更新但是页面内容不更新的解决方案
Vue切换路由时页面内容没有刷新（重新加载）
yuyang_z的博客
07-26 5754
最近在做关于vue的项目时，问题是这样的，发现在一个页面提交申请单（用localstorage存储的），需要在另一个页面查看提交的申请单的内容，这里涉及到路由的切换，但发现在申请单提交后，另一个页面并不会实时加载这个提交的内容。 查看了之后是App.vue中使用了<keep-alive> keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DO...
【VUE3使用记录】页面及路由刷新
热门推荐
cpsxn的博客
06-08 1万+
整理工作中用到的页面刷新方式 1.provide/inject 2.router.go(0) 3.location.reload 4.重复点击菜单时刷新页面
vue中如何实现tabs切换不刷新，以avue-tabs为例
chenxiujie2015的博客
06-27 2577
vue中如何实现tabs切换不刷新，以avue-tabs为例示例代码标签使用如下： 示例代码 下面展示一些 内联代码片。 前端代码 <template> <div class="main"> <avue-tabs ref="tabs" :option="tabs.option" @change="handleChange" /> <!-- 失活的组件将会被缓存！--> <keep-alive> <qc
vue路由改变页面不刷新原因
09-18
Vue的路由切换页面不刷新是由于Vue采用了单页应用（Single Page Application, SPA）的开发模式。单页应用是指只有一个HTML页面的应用，通过动态的改变页面的内容来实现不同的页面展示效果，而不是每次刷新整个页面。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值