Vue 中使用 router-link 后，URL 变化但是页面不刷新

已于 2022-12-04 13:24:05 修改
阅读量3.8k 收藏 4
点赞数 3
文章标签： vue.js 前端 javascript
于 2021-11-02 14:24:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_62404884/article/details/121099378
版权
本文解决了Vue项目中使用router-link进行页面跳转时遇到的一个常见问题：虽然URL已更改，但页面内容未更新，仍显示前一页内容。通过在App.vue中添加特定的key属性，确保每次路由变化时视图也会相应更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先遇到这个问题后很疑惑，明明设置了 router-link 跳转，但还是出现了问题，虽然URL发生了变化，但是页面却没变化，还停留在上一个页面的内容。尝试了好多方法发现都没用，最终找到了一个比较好的方法。

在App.vue中添加

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

*阳*
关注
vue 跳转同一路由,页面不刷新解决方案
qq_35897953的博客
08-10 1万+
vue 跳转同一路由,页面不刷新解决方案 问题原因 ： vue官网详细解释说明使用同一路由携带不同参数，本质上是重用相同的组件实例，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件，因此不会调用组件的生命周期挂钩 解决方案1 - 监听路由变化 官方提供的解决方案为要对同一组件更改做出反应，监听$route的变化，或者使用使用2.2中引入的beforeRouteUpdate 导航卫士，调用对应的方法 //#/mk_gsui?id=2 // 监控data中的数据变化 watch: { $r
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2487
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
vue router-link 路径变化 页面内容不变
华子的专栏
05-15 1万+
在VUE项目中有碰到过，vue 同一 路由页面 用router-link 或者 router.push（） 访问同一路由页面，出现url地址有变化，但是页面内容没有变化，没有重新加载信息解决方案如下    &lt;router-link  to="/home" @click.native="flushCom"&gt;首页&lt;/router-link&gt;&lt;script&gt;    e...
【Vue】解决路由切换，页面不更新的实用方法
热门推荐
汪小穆的博客
09-22 6万+
前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。
【Vue】Vue Router使用router-link，URL变化，页面不刷新、数据没变
开发学习工作日志
08-04 4204
开发过程中遇到一个Bug，在列表选择一条数据，跳转到详情页，然后通过浏览器回退到列表，再选择另一条数据，进入详情页，发现数据显示的是上一次的数据。在详情页vue created函数中，输出列表页传来的值，发现第二次详情页跳转，created函数并没有执行。 列表页跳转的代码 <el-table-column label="类型" align="center" :show-overflow-tooltip="true"> <template slot-scope="scope"
vue router路由跳转了，但页面没有变
lwj1372391870的博客
06-29 4638
vue router路由跳转了，但页面没有变
Vue 中使用 router-link 后，URL 变化但是页面不刷新，Vue获取java后台传过来的值
qq_33922980的博客
12-02 3313
一.遇到的问题:Vue 中使用 router-link 后，URL 变化但是页面不刷新 今天在项目中遇到了这样的问题: 当使用 router-link 跳转后， 想要返回，浏览器中的地址虽然改变了，但是页面却并没有刷新 解决的办法 1.我最原始的使用了刷新页面的办法，在vue中使用了this.$router.go(-1) 返回上一级，然后使用this.$router.go(0) ，使用了这种方...
详谈vue中router-link和传统a链接的区别
10-15
在性能方面，`<router-link>` 仅更新变化的部分，避免了整个页面的重渲染，这得益于Vue的虚拟DOM和diff算法，能够有效地减少DOM操作，提高性能。相比之下，`<a>` 标签每次跳转都会触发整个页面的渲染，对于大型项目...
vue中的router-view组件的使用教程
10-17
结合`<router-link>`组件，用户可以在不刷新整个页面的情况下，平滑地在各个视图之间切换，提高应用的用户体验。同时，Vue Router 提供的路由参数、命名视图等高级特性，使得路由管理更加灵活和强大。在实际开发中，...
解决vue 路由变化页面数据不刷新的问题
08-27
总结，解决Vue路由变化时页面数据不刷新的问题，关键在于正确监听路由变化并及时更新组件中的数据。这可以通过`watch`、`beforeRouteUpdate`或直接在`created`钩子中处理数据请求来实现。确保每次路由变化时，组件都...
vue，vue-router实现浏览器返回不刷新页面
weixin_30709929的博客
05-27 1237
当我们在写单页应用的时候，前端路由采用vue-router实现，如果从页面A跳到页面B，然后点浏览器返回，返回到页面A时，页面会刷新。最近遇到一个需求，一个列表页，用户会根据条件进行筛选，也可以翻页，当用户筛选后点击具体的某一个条目时，进入详情页查看编辑详情，用户点击返回时，希望之前页面的筛选条件也能够保留。查找相关资料，vue中有个keep-alive组件可以对组件进行缓存，这样当页面返回时就不...
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 8801
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
VUE的router-link不刷新,路由跳转后缓存还在的终极一步到位的解决方法,也适用与若依框架
张子豪的博客
09-07 4581
如果你用的是若依框架的话,直接打开src/api/router/index.js路由配置项。我是要跳转到/system/sale-saleDetail/index/+ id参数。只要是true就可以每次跳转都刷新缓存了,默认是false.网上找了一大堆,屁用都没有,自己琢磨了一下简单的要死.网上搞得那些方法没一个有用的,浪费时间啊!比如,我的html是这样的。
Vue 解决route-link路由跳转时页面不刷新问题
qq_46274901的博客
04-15 5102
Vue 解决route-link路由跳转时页面不刷新问题
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 1万+
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
vue路由跳转了但是页面组件没变
web8_zhy的博客
04-14 4360
1.菜单用的是elementui的menu组件，index的值不能重复 2.如果index没重复，但还是不变。试着在APP.vue里面的routerview标签加上key
Vue——vue router路由跳转了，但是页面没有变
qq_43201350的博客
07-12 7235
解决方案：在app.vue页面中加上router-view(很关键）
vue跳转，前进后退，点击浏览器的返回按钮，地址栏路由变了但是页面没跳转
H_ZMY的博客
09-04 4632
页面A—>B,B—>C,C—>B(OK),B—>A(失败)已解决。
Vue的router-link路由跳转但页面没有刷新！！
实事求是，艰苦奋斗，小小的梦想，终将实现。
02-18 2581
原因 vue-router中router-link路由跳转也传统的路由跳转不同，vue-router的路由跳转其实是组件之间的跳转。因此：在跳转相同组件不会触发vue的视图更新。 解决方法 在router-view上添加 :key="$route.fullPath"属性即可。 <router-view :key="$route.fullPath" /> ...
router-link 不去刷新页面
最新发布
06-15
`router-link` 是Vue Router库中的一个组件，用于在单页应用（SPA）中创建链接，当你点击这样的链接时，并不会像传统服务器端路由那样引发整个页面的刷新。相反，Vue Router会使用前端路由技术，导航到指定的路由组件，通过组件的切换实现页面内容的更新，保持当前浏览器历史记录和URL不变。 要让`router-link`不刷新页面，关键在于设置它的`to`属性，指向一个vue-router定义的路由对象，而不是直接的页面路径。例如： ```html <router-link :to="{ name: 'yourRouteName', params: { param1: 'value1' } }"> Link Text </router-link> ``` 在这个例子中，`name`是路由配置中的名称，`params`用于传递动态参数。当用户点击这个链接时，只会导航到相应的路由，页面内容会动态地加载。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值