vue3页面query参数变化并重新加载页面数据方式
更新时间：2024年10月18日 09:20:13 作者：钢铁加lulu
在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive
一、业务场景
列表页携带id跳转到详情页，id发生变化重新加载当前页面。
跳转分两种情况，假设A页面是id为1111的详情页，B页面是id为2222的详情页。
- 第一种，A页面跳转到B页面，B页面返回时直接返回列表页。
- 第二种，A页面跳转到B页面，B页面返回时返回A页面，A页面再返回返回到列表页。
二、实现方式
核心方法： $router.push $router.replace
A页面跳转到B页面的方法：
- 第一种情况：
import { useRouter } from 'vue-router'
const router = useRouter()
router.replace({
path: '/eFileManagement/company/collection/detail',
query: { id: '2222' }
})- 第二种情况：
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({
path: '/eFileManagement/company/collection/detail',
query: { id: '2222' }
})三、发现问题
到第二步，我们需要的功能就已经实现了，但是会发现地址栏id是变化了，页面数据却并没有刷新，这时我们给App.vue里的router-view标签添加一个key值即可
如下：
<router-view :key="routerKey"></router-view>
import { useRoute } from 'vue-router'
const route = useRoute()
const routerKey = computed(() => {
return route.path + Math.random()
})OK！
延伸：（keep-alive）
如果router-view在keep-alive标签下，那么需要再给router-view加个状态值，用来控制router-view显示隐藏，并且provide注入，方便页面中调用。
App.vue：
<router-view :key="routerKey" v-if="isAlive"></router-view>
import { ref, provide, nextTick } from 'vue'
const isAlive = ref<boolean>(true)
function reload() {
isAlive.value = false
nextTick(() => {
isAlive.value = true
})
}
provide('reload', reload)A页面里：
import { inject } from 'vue'
const reload:any = inject('reload')然后在push或者replace方法后调用reload方法。
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({
path: '/eFileManagement/company/collection/detail',
query: { id: '2222' }
})
reload()总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
toRaw和markRaw是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性,它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成,本文给大家介绍Vue 3中toRaw和markRaw的使用,感兴趣的朋友一起看看吧2023-10-10
VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)
最近了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,下面这篇文章主要给大家介绍了关于VUE3+mqtt封装解决多页面使用需重复连接等问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue中使用eslint和editorconfig方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
这篇文章主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
一文搞懂vue中provide和inject实现原理对抗平庸
这篇文章主要为大家介绍了vue中provide和inject实现原理的深入理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了vue activated在子组件中的使用，文章围绕vue activated的xingu你资料讲解展开内容并附上具体代码,需要的朋友可以参考一下2021-11-11
现在的短信验证码一般为4位或6位，则页面中会相应的显示4个或6个文本框.好多网站需求都有此功能，今天小编给大家分享基于vue.js实现移动端短信验证码功能，需要的朋友参考下吧2017-03-03
解决vue js IOS H5focus无法自动弹出键盘的问题
今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章我们将一起学习vue.js实现绑定class和style样式，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论