【已解决】Vue的router-link地址变化但页面不刷新

本文探讨了Vue项目中使用router-link组件时遇到的产品详情页推荐产品无法跳转的问题,并提供了解决方案,即通过设置router-view的key属性值为$route.fullPath来触发页面重新加载。

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

由于最近搞了一般企业网站做练习,其中遇到各种的问题,今天无意中发现router-link点击产品的时候,列表页可以顺利进入详情页,但是详情页里面推荐产品却不能跳转。
例如进入的是:/products/366?scode=25点击某个推荐产品:/products/368?scode=25
路由结构是:
path: '/products/:id', name: 'Products', component: () => import("@/components/Products")
死活就是不跳转,但是url是变化的啊,抓耳挠腮大半天,查资料之后终于弄懂了这个问题。

一般出现的情况:当前链接和政要点击的链接地址结构是一样的,就不能跳转了。(貌似是路由的过,因为路由结构本身没变化,所以网页不会刷新,而是变化的url而已)
解决方案:

设置 router-view 的 key 属性值为 $route.fullPath

找到根目录的App.vue

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

解释什么是$router.fullPath,什么时候需要用到?

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蹦极的考拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值