How to make default page in VueJS child routes?

Question

Vue.js

There is such a section of the personal account:

Open

{
  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',
    },
  ]
}

The Settings component plays the role of a template and does not carry any independent information; there is no separate page, the component contains only a template for internal pages.
Accordingly, when entering the settings, the Personal component should always open, and to do this, you need to give name: "personal" for But at the same time, you need to show that the link leading to the settings section is active, which is impossible, because we specify a specific route (personal ), not the general one (settings). If we give a name to the common route (settings), then this empty template will also be opened by the link, and the Personal component should be opened. Is there such a possibility? If not, how else to solve this problem? <router-link :to="{name: 'personal'}">
I thought there must be a way to assign a default component, but I couldn't google it.

Answer 1

In the general route, you need to specify the property
redirect: { name: 'personal' }

Answer 2

It works for me like this:

{
  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: 'Редактировать документ' },
    },
  ],
},

Those. I specify the path for the parent component, but I do not specify the parent for the child component, which should open by the path-parent.
In the router-link: In the documentation, this point is here https://router.vuejs.org/en/guide/essentials/neste... (at the end of the article).