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（）会给我错误； “您可能在监视程序中使用表达式“ $ 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

Vue URL更新，但组件未更新

2 个答案: