Динамический URL Vuejs Vue Router не работает должным образом - PullRequest
Новая
       52

Динамический URL Vuejs Vue Router не работает должным образом

0 голосов
/ 07 ноября 2019

У меня есть приложение vuejs с реализацией маршрутизатора Vue, мой динамический URL не отображает извлеченные данные после первого рендеринга. У меня есть панель поиска для поиска пользователей, на главной странице (https://reboundtribe.com)) поиск возвращает пользователей, когда пользователь нажимает на них, он переходит в профиль пользователя, но любой поиск на странице профиля пользователя не отображает данные пользователя. если пользователь нажал

, посещение http://reboundtribe.com (benjaminchukwudi0@gmail.com, 123456) - войдите в систему и выполните поиск по запросу «Бен», затем щелкните любого пользователя, чтобы перейти на страницу профиля пользователя, наНа странице профиля пользователя нажмите любого другого пользователя, и результат не изменится

Я использовал идентификаторы и имена пользователей как params, но та же проблема, когда страница обновляется, она отображает данные пользователя

Код маршрутизатора 

    {
         path: '/:username/profile',
         component: Profile,
         meta: {
             requiresAuth: true
         }
    },

На странице профиля 

    beforeRouteEnter (to, from, next) {
        axios.get(`/auth/user/${to.params.username}/profile`)
            .then(response => {
                next(vm => (vm.user = response.data));
            })

    },

предполагается предоставить данные пользователя. Пожалуйста, помогите мне.

Спасибо

1 Ответ

0 голосов
/ 08 ноября 2019

Проблема в том, что маршрут не меняется (меняются только параметры), а ловушка beforeRouteEnter не срабатывает.

Также на Github обсуждается эта проблема: https://github.com/vuejs/vue-router/issues/1350#issuecomment-295367452

Вы можете попытаться добавить наблюдателя для параметра для извлечения данных, если имя пользователя изменяется (сохраняя хук beforeRouterEnter) 

watch: {
  '$route.params.username': function (username) {
      axios.get(`/auth/user/${username}/profile`).then(response => {
         this.user = response.data;
      })
   }
},
...