vue3页面query参数变化并重新加载页面数据

一、业务场景

列表页携带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()