Vue.js 라우터 링크가 업데이트되지 않음

Vue.js 라우터 링크가 업데이트되지 않음

다음과 같은 단순화된 코드를 사용하여 재현한 문제가 발생함:

앱뷰

      <router-link to="/">Home</router-link> |
      <router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
         View 1 - Param 1
      </router-link>
      <router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
         View 1 - Param 2
      </router-link>
      <router-view :key='$route.path' />

뷰1.vue

    <template>
      <div>
        My prop = {{myprop}}
      </div>
    </template>

Home 링크를 시작하고 "View 1 - Param 1"을 클릭하면 View1로 이동하며 "My prop = hello 1"을 확인하십시오.이것은 예상한 대로다.

그런 다음 홈 페이지로 돌아가서 "View 1 - Param 2"를 클릭하면 View1로 이동하며 "My prop = hello 2"를 확인하십시오.이것도 역시 예상대로다.

여기서부터 문제가 시작된다.이미 "보기 1 - 매개변수 2"에 있는 동안 "보기 1 - 매개변수 1"을 클릭하면 보기 1로 이동하지만 메시지는 업데이트되지 않는다.그래서 '내 소품=헬로1'을 보는 대신 '내 소품=헬로2'를 다시 보게 된다.

내가 이해한 바로는 Vue는 "시작" 보기와 "끝" 보기가 같기 때문에 최적화로서 View1을 리렌더링하지 않고 있다. 그러나 분명히 그것은 내가 원하는 행동이 아니다.

나는 이것에 대해 몇 가지 조사를 했는데, "key='$route"를 사용하자고 제안하는 비디오를 우연히 보게 되었다.보기 태그의 '경로'"는 이 문제를 해결할 수 있다.하지만, 이것은 나에게 문제를 해결해주지 않는다.

이 문제를 해결하는 올바른 방법은 무엇인가?

네 해결책이 먹히지 않을 거야.$route.path문자열은 쿼리 매개 변수를 포함하지 않는다.따라서 "보기 1 - 매개변수 2"에서 "보기 1 - 매개변수 1"로 변경하면$route.path동일하게 유지되며, 보기를 업데이트하지 않는다.

사용하다$route.fullPath이렇게 하면 쿼리와 해시를 포함한 전체 확인 URL이 포함되어 보기가 업데이트된다.

<router-link to="/">Home</router-link> |
<router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
   View 1 - Param 1
</router-link>
<router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
   View 1 - Param 2
</router-link>
<router-view :key='$route.fullPath' />

또는 "View1.vue" 내의 경로 쿼리 매개 변수에 감시자를 추가할 수 있다.이렇게 하면 추가하지 않아도 된다.key당신께router-view

뷰1.vue

<template>
  <div>
     My prop = {{pageProp}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageProp: ""
    }
  },
  watch: {
    "$route.query": {
      immediate: true,
      handler(n) {
        this.pageProp = n.myProp
      }
    }
}
</script>

사용할 수 있다

<router-view :key ='$route.params'/> 

사용하지 않고

<router-view :key ='$route.path'/> 

내 경우에는 효과가 있었다.

참조URL: https://stackoverflow.com/questions/62868980/vue-js-router-link-not-updating