vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式
更新時(shí)間：2024年10月18日 09:20:13 作者：鋼鐵加lulu
在Web開發(fā)中,頁面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見問題,通過使用$router.push和$router.replace方法,可以控制頁面跳轉(zhuǎn)的行為,具體操作時(shí),若發(fā)現(xiàn)頁面ID變更后數(shù)據(jù)未刷新,可通過給router-view標(biāo)簽添加key值解決,若使用keep-alive
一、業(yè)務(wù)場(chǎng)景
列表頁攜帶id跳轉(zhuǎn)到詳情頁，id發(fā)生變化重新加載當(dāng)前頁面。
跳轉(zhuǎn)分兩種情況，假設(shè)A頁面是id為1111的詳情頁，B頁面是id為2222的詳情頁。
- 第一種，A頁面跳轉(zhuǎn)到B頁面，B頁面返回時(shí)直接返回列表頁。
- 第二種，A頁面跳轉(zhuǎn)到B頁面，B頁面返回時(shí)返回A頁面，A頁面再返回返回到列表頁。
二、實(shí)現(xiàn)方式
核心方法： $router.push $router.replace
A頁面跳轉(zhuǎn)到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' }
})三、發(fā)現(xiàn)問題
到第二步，我們需要的功能就已經(jīng)實(shí)現(xiàn)了，但是會(huì)發(fā)現(xiàn)地址欄id是變化了，頁面數(shù)據(jù)卻并沒有刷新，這時(shí)我們給App.vue里的router-view標(biāo)簽添加一個(gè)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標(biāo)簽下，那么需要再給router-view加個(gè)狀態(tài)值，用來控制router-view顯示隱藏，并且provide注入，方便頁面中調(diào)用。
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方法后調(diào)用reload方法。
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({
path: '/eFileManagement/company/collection/detail',
query: { id: '2222' }
})
reload()總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
toRaw和markRaw是Vue 3中引入的新API,用于更精細(xì)地控制對(duì)象的代理和響應(yīng)性,它們提供了在需要時(shí)繞過代理或禁用響應(yīng)性的能力,有助于提高性能和更好地與第三方庫進(jìn)行集成,本文給大家介紹Vue 3中toRaw和markRaw的使用,感興趣的朋友一起看看吧2023-10-10
VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實(shí)例)
最近了解到mqtt這樣一個(gè)協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue中使用eslint和editorconfig方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue中圖片Src使用變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作
這篇文章主要介紹了vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
一文搞懂vue中provide和inject實(shí)現(xiàn)原理對(duì)抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了vue activated在子組件中的使用，文章圍繞vue activated的xingu你資料講解展開內(nèi)容并附上具體代碼,需要的朋友可以參考一下2021-11-11
Vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能
現(xiàn)在的短信驗(yàn)證碼一般為4位或6位，則頁面中會(huì)相應(yīng)的顯示4個(gè)或6個(gè)文本框.好多網(wǎng)站需求都有此功能，今天小編給大家分享基于vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能，需要的朋友參考下吧2017-03-03
解決vue js IOS H5focus無法自動(dòng)彈出鍵盤的問題
今天小編就為大家分享一篇解決vue js IOS H5focus無法自動(dòng)彈出鍵盤的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，感興趣的小伙伴們可以參考一下2016-12-12