功能问题:如何解决跳同一路由组件时页面不变?

大家好,我是大澈!

本文约1100+字,整篇阅读大约需要2分钟。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 需求分析

Vue中,偶尔会遇到一个很奇怪的问题。

当我们多次使用 router.push() 方法,向同一路由组件跳转时。

此时,如果只是传入的参数不同,就会出现 url 地址变了,但是页面没有重新请求数据、生命周期函数未调用、页面未重新渲染等问题。

最后,我们需要手动刷新一下页面,才会有页面内容的更新。

没听明白问题?没关系,下面看一下该问题的动画演示

如下图,当点击详情1按钮,跳转到详情1组件,并显示内容为携带的参数1。然后,再点击详情2按钮,跳转到详情2组件,并显示内容为携带的参数2。

此时问题出现了,点击详情2按钮时,虽然地址栏中的路由变化了,但是组件的内容仍然显示的是上次跳转携带的参数1

看到这个问题,可能对于一些朋友来说,比较简单,此时欢迎你的指教与补充。

然后下面,我们就一起来聊聊该问题的原因,以及盘点一下该问题解决的几种常见方式。

2. 问题实现

先来聊聊该问题的原因,再分开说一下该问题几种常见解决方式的实现。

下面所有实现示例,都是Vue3代码

2.1 问题原因

Vue Router 默认情况下,会复用相同组件的实例,而不是销毁和重新创建它们。

这种复用的机制可以提高性能,并且在大多数情况下是符合预期的。

/Details/1 => /Details/2 或者 /Details?id=1 => /Details?id=2 ,这类链接跳转时, 原来的组件实例会被复用。

因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用,进而导致页面不再被更新。

2.2 方式一 在路由入口上添加key

这个方式我觉得是最好用的。

这个要写在相同的那个路由组件的路由入口处。

ini 复制代码
<RouterView :key="route.fullPath" />

2.3 方式二 watch监听路由变化

这个要写在相同的那个路由组件中。

javascript 复制代码
watch(route, (to) => {
    // 这里写要更新的东西
}, {immediate: true})

2.4 方式三 使用路由守卫

使用7种路由守卫,这里我只尝试了其中一个。

这个要写在相同的那个路由组件中。

javascript 复制代码
router.beforeEach((to, from, next) => {
    // 这里写要更新的东西
    next()
})

2.5 小结

Vue Router 默认情况下,会复用相同组件的实例,而不是销毁和重新创建它们。

所以会出现,多次跳转同一路由组件时页面不更新的问题。

解决方式有如下几种:

方式一,在router-view上添加key。这个方法比较简单,推荐。

方式二,watch监听路由变化。

方式三,使用路由守卫。

当然,该问题的解决方法肯定还有很多,欢迎朋友们补充!

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
  • 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

相关推荐
小阮的学习笔记14 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜14 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=15 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧17 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck19 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!40 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架