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

Есть вот такой раздел личного кабинета:
Открыть
{
	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.

Я подумал, что должен быть способ назначить компонент по-умолчанию, но нагуглить не смог.
Есть ли такая возможность? Если нет, то как по-другому решить данную проблему?
  • Вопрос задан
  • 663 просмотра
Решения вопроса 1
markmariner
@markmariner
В общем роуте нужно указать свойство
redirect: { name: 'personal' }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
У меня так работает:
{
  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... (в конце статьи).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы