【Vue之如何在同路由页面跳转时刷新页面数据】_vue路由跳转更新数据-优快云博客

文章介绍了如何在Vue2和Vue3中使用`routerKey`解决页面B在接收到不同参数P1和P2时，始终显示最初参数的问题，通过动态生成key来区分不同的页面状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

近日，做项目时遇到一种场景，页面A上和导航栏搜索栏都可以跳转到页面B，但是传的参数不同。如果A push到B，参数为P1，那么从搜索栏push B时，参数为P2，页面B应该显示B(P2)。
总的来说就是 B(P1) push B(P2)，实际显示了B(P1)，应显示 B(P2)。
为解决这个问题，下面我将从Vue2和Vue3分别介绍两种写法。

打开App.vue文件。

Vue2

关键部分

    <router-view :key="routerKey"/>
    
      routerKey: {
        get() {
          return this.$route.path + Math.random()
        },
      },

完整代码

<template>
  <div id="app">
    <router-view :key="routerKey"/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    computed: {
      routerKey: {
        get() {
          return this.$route.path + Math.random()
        },
      },
    },
  }
</script>

Vue3

关键部分

  <router-view :key="routerKey"/>
 
const routerKey = computed(() => {
  return route.path + Math.random()
})

完整代码

<template>
  <router-view :key="routerKey"/>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
 
const routerKey = computed(() => {
  return route.path + Math.random()
})
onMounted(() => {
})
</script>