在同一路由上强制重新加载不同的查询参数Vue JS答案

【问题标题】：Force reload on same route diferent query parameter VueJS在同一路由上强制重新加载不同的查询参数Vue JS
【发布时间】：2020-03-17 15:12:10
【问题描述】：

当用户从编辑页面单击时，我正在尝试重新加载页面组件，路由器不会重新加载并且旧的编辑值仍然存在。

{
  path: "/products/new",
  component: ProductPage,
  meta: {
    breadcrumb: [
      { name: "Home", link: "/home" },
      { name: "Products", link: "/products" },
      { name: "New Product" }
    ]
  }
},
{
  path: "/products/:id",
  component: ProductPage,
  meta: {
    breadcrumb: [
      { name: "Home", link: "/home" },
      { name: "Products", link: "/products" },
      { name: "Edit Product" }
    ]
  }
}

当两个页面具有相同的组件时，我们有什么方法可以重新加载页面组件？

【问题讨论】：

这能回答你的问题吗？ What is <router-view :key="$route.fullPath"> ?
您可以根据当前路由 (see here) 将属性传递给组件，以便对它们的变化做出反应。
当你使用同一个组件时，Vue 会尝试重用它而不是重新创建它。要将它们视为不同的并在路由更改时再次创建组件，您必须将 key 特殊属性添加到 <RouterView> 组件，如下所示：<RouterView :key="$route.fullPath" />。

标签： javascript vue.js vue-component vue-router

【解决方案1】：

使用$router.go()...

this.$router.go({path:'/products', params:{id:id}})

【讨论】：