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

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

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

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

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

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

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

二、實現(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)實現(xiàn)了，但是會發(fā)現(xiàn)地址欄id是變化了，頁面數(shù)據(jù)卻并沒有刷新，這時我們給App.vue里的router-view標(biāo)簽添加一個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加個狀態(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()