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

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

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选项

Answer 2

push方法实际上returns一个Promise可以用来处理更新的路由：

this.$router.push("/blog/" + user + "/" + row.Name)
  .then(() => {
    console.log('Updated route', this.$route)
    // process the updated route params
  })

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

vue3 router.push doesn't update the component when url match the same route?

javascript

vue.js

vue-router

vuejs3

vue-router4

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

我试过的。

更多信息