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

Question

在子组件中我遇到了一些问题。

路由器配置路径“/blog/:user/:article”

文件“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警告，它告诉我观察源必须是一个引用反应对象，并且路由器推送仍然不会更新组件。

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 };
  }
})

我很困惑！vue3的设置需要注意什么？

更多信息

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

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

Answer 1

尝试观察路由参数，例如：

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

注意：使用() => route.params并route.params添加deep选项