Где я ошибся с конфигурацией vue-router или проблема где-то в моем компоненте? - PullRequest
Новая
       4

Где я ошибся с конфигурацией vue-router или проблема где-то в моем компоненте?

0 голосов
/ 26 октября 2019

У меня есть список пользователей, которые я выводил в компоненте Home vue. Каждый элемент в списке происходит от vuex и имеет свои данные. Когда я щелкаю по любому из этих элементов списка контактов, vue-router берет меня на маршрут / contact / that-item-id, например, contact / 4536475. Теперь, когда я нахожусь на этой странице для определенного элемента списка контактов и обновляю свои разрывы приложения в браузере, другими словами, у меня больше нет доступа к свойствам этого конкретного объекта элемента. Вот код моего маршрутизатора 

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/contact/:id",
      name: "ContactDetails",
      props: true,
      component: ContactDetails

Я устанавливаю свойство props в значение true, чтобы я мог передать его в качестве параметров для компонента сведений о контакте следующим образом: 

<router-link
   class="view-more-btn"
   :to="{ name: 'ContactDetails', params: { id: contact.id }}"
>VIEW DETAILS</router-link>

и, наконец,Я передаю этот идентификатор методу getters в vuex, чтобы получить подробную информацию о выбранном элементе, как показано ниже: 

export default {
  props: ["id"],
  computed: {
    contact() {
      return this.$store.getters.getContactDetails(this.id);
    }
  }

Где я ошибся, почему я не могу обновить страницу сведений о контактном элементе и сохранить состояниеЯ использую.

Я новичок в Vue, поэтому, пожалуйста, прости меня, если я не делаю смысла. И конечно любая помощь приветствуется, заранее спасибо

1 Ответ

0 голосов
/ 26 октября 2019

Возможно, проблема в том, что вы ссылаетесь на именованный маршрут и передаете параметры вручную. Это не изменит фактический маршрут, отображаемый в адресной строке вашего браузера, и покажет только корневой путь (/contact/ в вашем примере, я полагаю). Поэтому, когда вы обновляете переданные в params / props просто больше не существует.

Вместо этого вам нужно использовать <router-link :to="'/contact/'+contact.id"> или <router-link :to="`/contact/${contact.id}`"">.

Это должно повлиять на URL в адресной строке вашего браузера, чтобы включить /contact/someID123, который также сделает идентификатор доступным при обновлении.

...