【Vue之如何在同路由页面跳转时刷新页面数据】

@Vue之如何在同路由页面跳转时刷新页面数据

背景

近日，做项目时遇到一种场景，页面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>

感谢您的阅读！