Как сделать страницу по-умолчанию в дочерних роутах VueJS?

Question

[Денис Букреев]

Есть вот такой раздел личного кабинета:

Открыть

{
	path: 'settings',
	component: Settings,
	children: [
		{
			path: 'personal',
			component: Personal,
			name: 'personal',
		},
		{
			path: 'security',
			component: Security,
			name: 'security',
		},
		{
			path: 'platforms',
			component: Platforms,
			name: 'platforms',
		},
		{
			path: 'preference',
			component: Preference,
			name: 'preference',
		},
	]
}

Компонент Settings играет роль шаблона и не несет какой-то самостоятельной информации, т.е. отдельной страницы нет, компонент содержит лишь шаблон для внутренних страниц.
Соответственно, при заходе в настройки всегда должен открываться компонент Personal, а чтобы это сделать, надо дать name: "personal" для <router-link :to="{name: 'personal'}">
Но одновременно надо показывать, что ссылка, ведущая на раздел настроек, активна, что невозможно, ведь мы указываем определнный роут (personal), а не общий (settings).
Если мы дадим имя общему роуту (settings), то и по ссылке будет открываться этот пустой шаблон, а должен открываться компонент Personal.

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

Answer 1

[markmariner]

В общем роуте нужно указать свойство
redirect: { name: 'personal' }

Answer 2

[Сергей Зимоглядов]

У меня так работает:

{
  path: '/document',
  component: { template: '<router-view></router-view>' },
  meta: { title: 'Документация' },
  children: [
    {
      name: 'document-index',
      path: '',
      component: DocumentIndex,
      meta: { title: 'Вся документация' },
    },
    {
      name: 'document-create',
      path: 'create',
      component: DocumentCreate,
      meta: { title: 'Добавить документ' },
    },
    {
      name: 'document-update',
      path: 'update/:id',
      component: DocumentUpdate,
      meta: { title: 'Редактировать документ' },
    },
  ],
},

Т.е. у родительского компонента указываю path, а у дочернего, который должен открываться по path-родителя не указываю.
В router-link:
<router-link :to="{name: 'document-index'}">
В документации этот момент тут https://router.vuejs.org/ru/guide/essentials/neste... (в конце статьи).

Comments

[Денис Букреев]

этот вариант я тоже пробовал
и тут проблема в том, что тот путь, который имеет пустой path, берет на себя значение родительского класса

Т.е. если есть меню с подменю, где в обоих случаях есть стили для активной ссылки, то вот этот первый пункт (document-index) будет активным, когда открываются его сестринские пути.

[Сергей Зимоглядов]

Тогда только доработать вывод меню, добавить проверки на активный путь, и в зависимости от пути, делать ссылку активной или нет