Vue Router по умолчанию дочерний маршрут не загружается изначально

Question

Я настроил простой проект Vue (с vue-router и Vuetify), и я пытаюсь получить дочерний маршрут по умолчанию для загрузки при доступе к родительскому маршруту.

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

Вот код в router.js файле:

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home'
import Details from './views/Details'
import List from './views/List'
import NotFound from './views/NotFound'
import Secondary from './views/Secondary'
import Sections from './views/Sections'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'route.home',
      component: Home
    },
    {
      path: '/list',
      name: 'route.list',
      component: List
    },
    {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    },
    {
      path: '*',
      name: 'route.notfound',
      component: NotFound
    }
  ]
})

А вот ссылка на проект CodeSandbox.io: https://codesandbox.io/s/l41zk6olqz

Если вы выполните следующие действия в песочнице, вы увидите, что происходит:

1. Когда на Домашняя страница , щелкните ссылку Перейти к списку
2. На странице Список щелкните ссылку Перейти к разделам
3. Когда загружается страница Sections , я ожидаю дочерний маршрут по умолчанию (с именем route.details для загрузки), однако он не

The Сведения страница действительно загружается, если щелкнуть ссылку Подробно в списке вкладок.Я уверен, что это простая ошибка, но я не вижу дрова для деревьев.

Заранее спасибо.

Обновление (2019-04-03 @ 07:00): Дальнейшее копание, и похоже, что работает следующее: router.js

...
  {
      props: true,
      path: '/sections/:id',
      // name: 'route.sections',
      component: Sections,
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

А затем изменение router-link с :to="{ name: 'route.sections', params: { id: 1 } }" на :to="{ name: 'route.details', params: { id: 1 } }" Теперь разрешает дочерний маршрут по умолчанию.Это ожидается?Я получил информацию из этого SO-ответа: https://stackoverflow.com/a/50065601/9127864

Обновление (2019-04-03 @ 07:28): даже дальнейшее копание показывает, что это также возможно: router.js

...
  {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      redirect: {
        name: 'route.details'
      },
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

Затем я могу изменить router-link обратно на :to="{ name: 'route.sections', params: { id: 1 } }", и дочерний маршрут по умолчанию теперь загружается, когда пользователь обращается к родительскому маршрутизатору.

Надеюсь, это поможет кому-то еще в будущем.

Answer 1

Вот что я нашел для работы:

...
  {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      redirect: {
        name: 'route.details'
      },
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

Добавление в redirect: { name: 'route.details' } теперь делает родительский маршрут перенаправленным на выбранный дочерний маршрут.

Answer 2

Я думаю, что это способ, которым вы прокладываете маршруты из списка маршрутов. Я решил вашу проблему, и это мое решение.

Для перенаправления List.vue на разделы.

<router-link :to="`/sections/${1}/`">Go to Sections</router-link>

Answer 3

Вы можете перенаправить с родительского маршрута на дочерний маршрут:

redirect: {
   name: 'route.details'
}

Также возможно просто удалить свойство name из родительского маршрута и переместить его к первому дочернему.Это может вызвать некоторую путаницу, поэтому я бы выбрал вариант 1.

{
  alias: '',
  path: 'details',
  name: 'route.sections',
  component: Details
}