Динамическая ссылка Vue router и дочерняя страница перезагрузки - неправильно загружен компонент - PullRequest
Новая
       13

Динамическая ссылка Vue router и дочерняя страница перезагрузки - неправильно загружен компонент

0 голосов
/ 19 апреля 2019

Я добавляю в свой routes файл path с children: 

path: '/warehouse/:id',
name: 'ShowWarehouse',
component: ShowWarehouse,
children: [{
        path: 'edit',
        name: 'EditWarehouse',
        component: EditWarehouse
    }
]

Сейчас в компоненте ShowWarehouse У меня есть: 

        <div v-if="!changeEdit">
            <div v-if="warehouseData">
                <div>Name: {{ warehouseData.warehouse.name }}</div>
                <div>
                    <router-link
                    :to="{ name: 'EditWarehouse', params: {id: warehouseData.warehouse.id }}"
                     >Edit</router-link>
                </div>
            </div>
        </div>
        <router-view v-else></router-view>

Когда пользователь нажимает кнопку edit, мне нужно загрузить компонент EditWarehouse, но компонент ShowWarehouse должен исчезнуть, а если пользователь обратно (без /edit) исчезнет, ​​компонент EditWarehouse и загрузить компонент ShowWarehouse. Я пишу метод в watch: 

watch: {
    $route() {
        if (this.$route.path == '/warehouse/' + id_get_from_API + '/edit') {
            this.changeEdit = true;
        } else {
            this.changeEdit = false;
        }            
    }
},

Проблема в том, что когда пользователь находится на mydomain.com/warehouse/23/edit и щелкает страницу перезагрузки (F5), тогда Vue загружает компонент ShowWarehouse вместо загрузки EditWarehouse.

Я использую mode: 'history'.

1 Ответ

0 голосов
/ 19 апреля 2019

Проблема:

С веб-сайта Vue.JS: «Vue предоставляет более общий способ наблюдать и реагировать на изменения данных в экземпляре Vue : смотреть свойства». Когда вы обновите страницу, метод watch () не будет выполнен, потому что это новый экземпляр Vue, и в этом случае данные еще не изменились. Возможно, вам следует использовать другой шаблон, чтобы определить, какой компонент показывать. (https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property)

Решение:

Я предлагаю сделать EditWarehouse родственным маршрутом к ShowWarehouse, и сделать EditWarehouse своим собственным компонентом (у вас это уже есть) . Ссылка на маршрутизатор в компоненте ShowWarehouse может остаться прежней.

Фрагмент кода: 

const ShowWarehouse = {
  template: `<div><h1>ShowWarehouse</h1> <div v-if="warehouseData">
    <div>Name: {{ warehouseData.warehouse.name }}</div>
    <div>ID: {{ $route.params.id }}</div>
    <div>
      <router-link :to="{ name: 'EditWarehouse'}">Edit</router-link>
    </div>
  </div></div>`,
  computed: {
    warehouseData: function() {
      let data;

      let id = this.$route.params.id;
      if (id) {
        data = {
          warehouse: {
            name: 'Some Warehouse Name',
            id: id
          }
        }
      }

      return data;
    }
  }
};

const EditWarehouse = {
  template: "<h1>EditWarehouse [{{ $route.params.id }}]</h1>"
}

const router = new VueRouter({
  routes: [{
      path: '/warehouse/:id',
      name: 'ShowWarehouse',
      component: ShowWarehouse
    },
    {
      path: '/warehouse/:id/edit',
      name: 'EditWarehouse',
      component: EditWarehouse
    }
  ]
});


new Vue({
  el: '#app',
  router
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link :to="{ name: 'ShowWarehouse', params: { id: 123 }}">Go to Warehouse 123</router-link>
  </p>
  <router-view/>
</div>

Вот jsfiddle с тем же кодом: https://jsfiddle.net/austinwasinger/oruswb3a/39/

...