VueRouter: дочерний компонент не вызывается - PullRequest
Новая
       9

VueRouter: дочерний компонент не вызывается

0 голосов
/ 23 мая 2018

Привет, ребята. У меня есть следующий маршрут, который я пытаюсь вызвать различными компонентами, которые должны загружаться одновременно, используя вложенные маршруты. У меня есть навигационная панель (называемая NavBar), которая загружается вместе с моей главной формой (называемой MainForm).Каким-то образом MainForm не вызывается, только NavBar.У меня также есть форма с отсутствием NavBar, следовательно, следующая запись маршрута.Маршрутизатор содержит следующий код: 

import MainForm from '@/components/MainForm';
import NavBar from '@/components/NavBar';
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '',
      name: 'NavBar',
      component: NavBar,
      children: [
        {
          path: '/form/:id',
          component: MainForm
        }
      ]
    },
    {
      path: '/formNoNavBar/:id',
      component: MainForm
    }
   ]
});

При первой записи происходит то, что приложение NavBar загружается приложением, когда я захожу на http://localhost:8080/#/form/sampleid, но не загружает MainForm.На второй записи нет проблем с загрузкой MainForm.Кроме того, мои сомнения заключаются в том, что я добавил это в свой файл MainForm.vue: 

export default {
  name: 'MainForm',
  created: function () {
    console.log('heya');
  } ....

На втором входе в маршрут «heya» отображается на консоли, а на первом - нет.Как исправить вложенный маршрут, который я создал, для загрузки файлов NavBar и MainForm vue?

1 Ответ

0 голосов
/ 23 мая 2018

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

Родительский компонент маршрута должен быть макетом, который включает дочерний компонент маршрута.У родительского компонента маршрута должно быть <router-view></router-view> внутри.<router-view></router-view> будет заменен дочерним компонентом маршрута.

Это довольно хороший пример => https://codesandbox.io/s/qq8zk1n36. См. Layout.vue

...