RouteUpdate 이전 vue-router가 전환 시 이전 매개 변수를 사용함

RouteUpdate 이전 vue-router가 전환 시 이전 매개 변수를 사용함

vue-router를 사용하여 하나의 사용자 레코드에서 다른 사용자 레코드로 링크를 시도하고 있습니다.

내 경로는 vue-router docs의 상용구입니다.

  { path: '/user/:user_id', name: 'user', component: User, props: true },

다음 코드로 링크합니다.

<a @click="selectUser(user.parent)">{{user.parent.email}}</a>

방법:

  selectUser(user) {
    this.$router.push({ name: 'user', params: { user_id: user.id } })
  },

RouteUpdate 전에 를 사용하여 변경된 사용자를 로드하려고 합니다.

beforeRouteUpdate (to, from, next) {
  alert(this.user_id)
  this.fetch()
  next()
},

그리고 내 가져오기 방법:

  fetch() {
    this.$store.dispatch('users/fetchUser', this.user_id)
  },

저도 Vuex를 쓰고 있어요.beforeRouteUpdate의 this.user_id(prop)의 경보는 변경된 ID가 아닌 원래 ID로 응답합니다.새로 변경/합격된 아이디여야 하는 거 아닌가요?URL은 새 ID로 변경되지만 새로 전달된 ID가 아닌 이전 ID/원래 ID로 데이터를 로드하기만 하면 됩니다.

를 사용해야 합니다.to.params액세스 할 수 있습니다.구성 요소에 값을 할당해야 합니다.자동으로 할당되지 않습니다.

당신의 경우, 당신이 할당해야 합니다.to.params.user_id로.this.user_id부르기 전에this.fetch()에beforeRouteUpdate.

beforeRouteUpdate (to, from, next) {
  this.user_id = to.params.user_id
  alert(this.user_id)
  this.fetch()
  next()
}

컴포넌트 내 내비게이션가드에 대해서는 문서를 참조해 주십시오.

또 다른 방법은 시계를 소품 위에 놓는 것이다.user_id변경된 경우 메서드를 실행할 수 있습니다.fetch()

고객님의 경우:

watch: {
    user_id: function(newVal, oldVal) {
        this.fetch();
    }
},

이게 도움이 됐으면 좋겠어요!

언급URL : https://stackoverflow.com/questions/59884173/vue-router-beforerouteupdate-uses-old-parameter-when-switching