解决Vue的router-link路由跳转但页面没有刷新问题

最新推荐文章于 2025-08-26 14:01:37 发布
原创 最新推荐文章于 2025-08-26 14:01:37 发布 · 4.4k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

今天写项目写了一天 真是累死了，又碰到这种bug 让我很头大

原因

vue-router中router-link路由跳转也传统的路由跳转不同，vue-router的路由跳转其实是组件之间的跳转。因此：在跳转相同组件不会触发vue的视图更新。 

而我今天写的正好就是同一个组件不更新了！！！

解决方法

在router-view上添加 :key="$route.fullPath"属性即可。

<router-view :key="$route.fullPath" />

 

Vue 路由回退页面不刷新？深度剖析及实用解决方案汇总
weimengen的博客
11-27 3478
本文聚焦 Vue 路由跳转回退后页面不刷新问题，深入剖析其产生原因，详细阐述包括监听路由变化、利用多种钩子函数、借助 provide/inject 组合及 Vuex 状态管理等在内的多种实用解决方案，并强调需依项目需求灵活选用，同时注重数据更新时的性能优化，以提升用户体验，助力开发者构建流畅 Vue 应用。
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1318
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
若依框架路由跳转成功却显示空白页面问题
最新发布
weixin_51580418的博客
08-26 200
就是transition的问题，改成蓝色框就完美解决了。
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
热门推荐
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
Vue 解决route-link路由跳转时页面不刷新问题
qq_46274901的博客
04-15 5214
Vue 解决route-link路由跳转时页面不刷新问题
vue router-view解决 router-link跳转不刷新页面问题
m0_73533910的博客
07-19 1548
跳转前fullPath:http://localhost:8080/#/xxx?跳转后fullPath:http://localhost:8080/#/xxx?由于跳转前的路由path跟跳转后的路由path是一样的，所以vue会复用组件，不会刷新组件。跳转前路由fullPath跟跳转后的路由fullPath不一样，会刷新页面。以上路由path:http://localhost:8080/#/xxx。渲染页面(例如动态路由参数的变化)
解决Vue router-link绑定事件不生效的问题
10-15
从提供的内容中可以看到，调试路由跳转问题时，开发者可能错误地理解了path的用法。比如，有些开发者可能认为只写出路径名（如"/"）就能跳转到相应的路由，但实际上，需要写出完整的路由路径，或者使用路由的name...
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的实现代码 本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。 首先， Vue router-link 是 Vue.js...
详谈vue中router-link和传统a链接的区别
10-15
例如，你可能希望创建一个按钮来触发路由跳转，这时`<router-link tag="button">` 就派上用场了。 在性能方面，`<router-link>` 仅更新变化的部分，避免了整个页面的重渲染，这得益于Vue的虚拟DOM和diff算法，能够...
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 8985
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
Vue 中使用 router-link 后，URL 变化但是页面不刷新
m0_62404884的博客
11-02 3905
首先遇到这个问题后很疑惑，明明设置了router-link 跳转，但还是出现了问题，虽然URL发生了变化，但是页面却没变化，还停留在上一个页面的内容。尝试了好多方法发现都没用，最终找到了一个比较好的方法。 在app.js中添加 <router-view :key="$route.fullPath" /> ...
vue-router连续跳转同一路由页面，页面不刷新的解决办法
xiaoyuer_2020的博客
10-11 3980
跳转当前路由不会刷新页面，但route路由数据已经发生了变化，那么我们使用vue的watch去检测这样的变化，然后再重新请求数据请求接口即得到想要的数据。当前在 /order/detail 页面，继续跳转当前页面，传参不同。
RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转
weixin_48823116的博客
07-05 2716
RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转
Vue 路由跳转设置不刷新
Passerby_K的博客
10-09 4024
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。
vue 刷新页面_vue-router路由复用后页面没有刷新
weixin_39890289的博客
12-13 1698
vue-router提供了页面路由功能，可以用来构建单页面应用，在使用vue-router的动态路由匹配的时候，遇到了url变化了，但是页面却没有任何动静的问题，记录一下。动态路由匹配url变化了，但是组件没有变化是因为vue进行了组件复用，因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。所以我们需要手动进行数据刷新。我们可以简单的使...
【已解决】Vue的router-link地址变化但页面不刷新
蹦极的考拉
09-22 5207
由于最近搞了一般企业网站做练习，其中遇到各种的问题，今天无意中发现router-link点击产品的时候，列表页可以顺利进入详情页，但是详情页里面推荐产品却不能跳转。一般出现的情况：当前链接和政要点击的链接地址结构是一样的，就不能跳转了。（貌似是路由的过，因为路由结构本身没变化，所以网页不会刷新，而是变化的url而已）死活就是不跳转，但是url是变化的啊，抓耳挠腮大半天，查资料之后终于弄懂了这个问题。设置 router-view 的 key 属性值为 $route.fullPath。
解决路由跳转到同一个页面，vue页面不刷新问题
记录本人工作中遇到的问题、经验总结以及分享。
02-14 1435
原理：使用 watch 监听路由变化，手动更新数据。
vue router路由跳转了，但页面没有变
lwj1372391870的博客
06-29 4690
vue router路由跳转了，但页面没有变
vue router-link页面跳转并刷新跳转页面
05-26
在 Vue 中使用 `vue-router` 跳转页面时，默认情况下是不会刷新页面的。如果需要在跳转页面时刷新页面，可以使用以下方法： 1. 利用 `key` 属性强制组件重新渲染：在 `router-link` 标签上添加 `:key="$route....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值