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

Posted 2023-02-22

【中文标题】当 url 匹配相同的路由时，vue3 router.push 不更新组件？

【英文标题】：vue3 router.push doesn't update the component when url match the same route?

【发布时间】：2021-09-09 21:42:12

【问题描述】：

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

路由器配置路径“/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 反应性 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项目~

【问题讨论】：

试用router.push( name: 'Article', params: user: user,article:row.Name , replace:true );

@Boussadjra Brahim 这似乎什么也没做，我看到 Sonsole 调用 rowClick，浏览器的 url 更改和历史记录已添加，但 setup 只调用了一次。我想我必须向 watch() 寻求帮助！

为什么要看路线？

在模板中使用<router-link>而不是行链接时是否有效？这可以帮助缩小问题范围。

@Boussadjra Brahim 我在github上添加了一个预上传版本，你可以阅读最详细的'Article.vue'，v-html取决于需要更新的内容。所以我想使用watch更新内容的路由，这是这个页面的核心。

【参考方案1】：

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

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

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

【参考方案2】：

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

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