Vue3动态路由跳转后不刷新问题

问题情形

在写项目时遇到了这个问题。

如上图的动态路由，当使用该路由跳转时，组件report是不会刷新的，比如从/report/1跳转到/report/2，组件内容是不会改变的。
这个在vue-router官网便可以找到原文：router.vuejs.org/zh/guide/ad…

解决方案

我的解决方法是在组件上添加"key"属性，这样就能区分要跳转的组件，需要注意的是"key"值是唯一的。

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

import { useRouter } from 'vue-router'

const router = useRouter()
const routerKey = ref('') // 为了防止跳转时组件复用
const gotopage = (path) => { // 定义一个跳转函数
    routerKey.value = router.currentRoute.value.fullPath // 这样能做到key值唯一
    router.push(path)
}