Vue URL更新但组件不是

Question

我的网址更新有问题，但页面没有。

从主页，我显示projects 的列表。点击一个项目会将您带到"website.com/project/project-1"，一切都会按预期进行。

但是，在该页面的底部，我再次显示了一个列表。此列表与主页相同，具有相同的功能。但问题是，它会将 url 更新为"website.com/project/project-2"，但页面不会重新呈现或更改。

我的代码示例 我当前的组件路由器路径。

path: '/project/:project_slug',
name: 'ProjectPage',
component: ProjectPage

从项目页面到新项目页面的我的路由器链接

<router-link :to="{ name: 'ProjectPage', params: {project_slug: projectHighlightSlug} }">
   <h4 class="header-17 semibold">{{projectTitle}}</h4>
</router-link>

更新

这是我目前的方法/观看部分

methods: {
  goToProject() {
    this.$router.push({
     name: 'ProjectPage', 
     params: {project_slug: this.projectHighlightSlug}
  })
 },
},
watch:{
// eslint-disable-next-line no-unused-vars
'$route'(to, from) {
  this.goToProject();
  }
}

但是，to,from 是“已定义但从未使用过”，单击我的按钮调用 goToProject() 会出现错误； "你可能在 watcher 中有一个无限更新循环，表达式为 "$route""

Answer 1

正如 Vue 路由器 docs 中所解释的，当用户导航到的 url 使用相同的组件时，它使用该组件的相同实例。因此，文档建议收听 $route 更改或使用 beforeRouteUpdate 导航守卫。

Answer 2

您需要查看路线以更新您的页面。见下面的代码

watch:{
     '$route' (to, from) {
         this.goToProject()
         // call your method here that updates your page
      }
}, 

来源dynamic route matching