Vue Обновление URL, но Компонент не

Question

Возникла проблема с обновлением моего URL, но страницы нет.

На главной странице я отображаю список 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 () дает мне ошибку; "У вас может быть бесконечное обновление l oop в наблюдателе с выражением" $ route ""

Answer 1

Как объясняется в Vue Router docs , когда URL-адрес, на который пользователь переходит, использует тот же компонент, он использует тот же экземпляр этого компонента. Поэтому в документах рекомендуется прослушивать изменения $ route или использовать навигационную охрану beforeRouteUpdate.

Answer 2

Вам нужно посмотреть маршруты, чтобы обновить свою страницу. см. код ниже

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

источник Dynami c соответствие маршрута