Vue.js вложенная маршрутизация с дочерним по умолчанию

У меня проблема с дочерним маршрутом по умолчанию в Vue.js 2.

Когда я вначале захожу на localhost/листинги, он правильно загружает index.vue и map.vue как ребенок.

Когда я перемещаюсь с помощью router-link на localhost/lists/1, а затем с помощью router-link обратно на localhost/lists, он все равно загружает шаблон show.vue. Это не должно произойти?

У меня нет навигационной охраны или чего-либо, что должно мешать. Есть ли способ исправить это?

Мои маршруты:

window.router = new VueRouter({
    routes: [

        ...

        {
            path: '/listings',
            name: 'listing.index',
            component: require('./components/listing/index.vue'),
            children: [
                {
                    path: '',
                    component: require('./components/listing/map.vue')
                },
                {
                    path: ':id',
                    name: 'listing.show',
                    component: require('./components/listing/show.vue')
                }
            ]
        },

        ...

    ]
});

Ответ 1

Возможно, попробуйте переустановить детей, маршруты будут уволены в порядке их соответствия сверху вниз, так что, надеюсь, исправить это:

window.router = new VueRouter({
    routes: [

    ...

    {
        path: '/listings',
        name: 'listing.index',
        component: require('./components/listing/index.vue'),
        children: [
            {
                path: ':id',
                name: 'listing.show',
                component: require('./components/listing/show.vue')
            }
            {
                path: '',
                component: require('./components/listing/map.vue')
            },
        ]
    },

    ...

  ]
});

Просто для пояснения, ваш path: '' сути, служит" поймать все ", и, вероятно, поэтому, когда он наверху обнаруживается сразу, и поэтому маршрутизатор никогда не распространяется дальше на маршрут :id.

Ответ 2

Маркер "отец" не должен называться, если вы хотите использовать дочерний маршрут по умолчанию, поэтому вместо этого :to="{name: 'listing.index'}", используйте имя дочернего маршрута по умолчанию (например :to="{name: 'listing.map'}").

Код должен выглядеть так:

window.router = new VueRouter({
routes: [

    ...

    {
        path: '/listings',
        component: require('./components/listing/index.vue'),
        children: [
            {
                path: '',
                name: 'listing.map'
                component: require('./components/listing/map.vue')
            },
            {
                path: ':id',
                name: 'listing.show',
                component: require('./components/listing/show.vue')
            }
        ]
    },

    ...

  ]
});

Ответ 3

Когда вы используете named routes и хотите загрузить компонент с вашим дочерним элементом внутри, вы должны использовать имя маршрута для дочернего элемента.
В ссылках меню навигации, если вы используете имя маршрута для parent, дочерний элемент не будет загружаться автоматически, даже если дочерний путь ничего не значит.
Допустим, например, что у нас есть маршрут пользователя, и мы хотим показать список пользователей внутри компонента по умолчанию, поэтому всякий раз, когда мы идем по пути '/user', мы хотим загрузить список пользователей как дочерний элемент:

routes: [
   {
     path: '/user',
     name: 'User',
     component: User,
     children: [
       {path: '', name: 'UserList', component: UserList}, // <== child path is = '';
     ]
   }
  ]

Если вы подумаете о коде, вы можете предположить, что если вы идете по маршруту с именем "Пользователь", вы также можете добавить туда UserList, поскольку путь для родительского и дочернего элементов одинаков. но это не так, и вы должны выбрать "UserList" для имени. Почему это происходит? Потому что Vuejs загружает именно тот компонент, на который вы ссылаетесь, а не URL. на самом деле вы можете проверить это, вместо использования именованного маршрута в ваших ссылках, вы можете просто ссылаться на URL, на этот раз vuejs без проблем загрузит родителя и потомка, но когда вы используете именованный маршрут, он не смотрит на URL и загружает компонент, на который вы ссылаетесь.