vue -router beforeRouteUpdate использует старый параметр при переключении - PullRequest
Новая
       93

vue -router beforeRouteUpdate использует старый параметр при переключении

1 голос
/ 23 января 2020

Я использую 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 } })
  },

Я пытаюсь использовать beforeRouteUpdate для загрузки измененного пользователя: 

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

И мой метод извлечения: 

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

Я использую vuex как хорошо. Предупреждение this.user_id (prop) в beforeRouteUpdate отвечает исходным идентификатором, а не измененным. Разве это не должен быть недавно измененный / переданный идентификатор? URL-адрес изменяется на новый идентификатор, но он просто загружает данные со старым / исходным идентификатором, а не с недавно переданным.

Ответы [ 2 ]

1 голос
/ 23 января 2020

Вам необходимо использовать 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()
}

См. документы о компонентных навигационных средствах защиты.

0 голосов
/ 02 марта 2020

Другой способ - использовать часы на подставке user_id, когда они изменились, вы можете выполнить метод fetch()

В вашем случае: 

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

Я надеюсь, что это может быть полезным!

...