javascript - 当 url 匹配相同的路由时，vue3 router.push 不更新组件？

Question

在子组件中，我遇到了一些问题。
路由器配置路径“/blog/:user/:article”
文件“文章.vue”

defineComponent({
  setup() {
    console.log("Call setup()"); // Debug info

    const route  = useRoute();
    const router = useRouter();
    const store  = useStore(); // vuex
    
    // here omits many details.
    // some axios requests depend on the variables above.

    // problem come here
    // this is a function bind to a table(or list) display in <template>.
    // but the route must change and I need to update this component based on the row.
    const rowClick = (row) => {
      router.push("/blog/" + user + "/" + row.Name);
    }
    return { rowClick };
  }
})

但这不起作用，因为路由器认为它是同一个组件，并拒绝重新加载该组件。
所以我在调试控制台中看不到调试信息。
我有什么尝试。
首先，我只是使用 location.replace 来强制应用程序重新加载整个页面。
但这并不优雅，它需要更多的时间来重新加载和历史消失。
然后我尝试观看 route.params 但我的sonsole 记录了一个 vue 警告，告诉我观看源必须是 ref react 性 obj 并且路由器推送仍然不更新组件。

watch(route.params, (previous, current) => {
  console.log(`${previous} and ${current}`); // Debug info
})

我很困惑! vue3的设置应该注意什么？
更多信息

const routes: Array<RouteRecordRaw> = [
 {
  path: "/home",
  alias: "/",
  name: "Home",
  component: Home
 },
 {
  path: "/blog/:user/:article?",
  name: "Article",
  component: () => import(/* webpackChunkName: "article" */ "@/views/Article.vue"),
 },
];

export default createRouter({
 history: createWebHistory(),
 routes: routes,
});

注:这是我的第一个vue项目~

Answer 1

尝试观看路线参数，例如:

watch(()=>route.params, (previous, current) => {
  console.log(`${previous} and ${current}`); 
},
{deep:true})

备注 : 使用 ()=>route.params而是 route.params并添加 deep选项