快捷導(dǎo)航

vue3頁(yè)面query參數(shù)變化并重新加載頁(yè)面數(shù)據(jù)方式

更新時(shí)間：2024年10月18日 09:20:13 作者：鋼鐵加lulu

在Web開(kāi)發(fā)中,頁(yè)面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見(jiàn)問(wèn)題,通過(guò)使用$router.push和$router.replace方法,可以控制頁(yè)面跳轉(zhuǎn)的行為,具體操作時(shí),若發(fā)現(xiàn)頁(yè)面ID變更后數(shù)據(jù)未刷新,可通過(guò)給router-view標(biāo)簽添加key值解決,若使用keep-alive

一、業(yè)務(wù)場(chǎng)景

列表頁(yè)攜帶id跳轉(zhuǎn)到詳情頁(yè)，id發(fā)生變化重新加載當(dāng)前頁(yè)面。

跳轉(zhuǎn)分兩種情況，假設(shè)A頁(yè)面是id為1111的詳情頁(yè)，B頁(yè)面是id為2222的詳情頁(yè)。

第一種，A頁(yè)面跳轉(zhuǎn)到B頁(yè)面，B頁(yè)面返回時(shí)直接返回列表頁(yè)。
第二種，A頁(yè)面跳轉(zhuǎn)到B頁(yè)面，B頁(yè)面返回時(shí)返回A頁(yè)面，A頁(yè)面再返回返回到列表頁(yè)。

二、實(shí)現(xiàn)方式

核心方法： $router.push $router.replace

A頁(yè)面跳轉(zhuǎn)到B頁(yè)面的方法：

第一種情況：

    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)問(wèn)題

到第二步，我們需要的功能就已經(jīng)實(shí)現(xiàn)了，但是會(huì)發(fā)現(xiàn)地址欄id是變化了，頁(yè)面數(shù)據(jù)卻并沒(méi)有刷新，這時(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)值，用來(lái)控制router-view顯示隱藏，并且provide注入，方便頁(yè)面中調(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頁(yè)面里：

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()