Как установить маршрутизатор по умолчанию для дочернего маршрутизатора и установить страницу 404 в дочерних маршрутах?

Question

У меня есть главная страница с включенными дочерними роутерами. В этом маршрутизаторы у меня есть маршрутизатор по умолчанию (компонент целей) для главной страницы. Но когда я добавляю страницу 404, мой дочерний маршрутизатор все время устанавливается на страницу 404.

Как правильно установить дочерний маршрутизатор по умолчанию и установить страницу 404?

мои роутеры

{
      path: '/',
      name: 'MainPage',
      component: MainPage,
        meta: {
            title: (route: any) => 'Goal list'
        },
        children: [
            {
                path: '/404',
                name: '404',
                component: NotFound,
            }, {
                path: '*',
                redirect: '/404'
            },
            {
                path: '',
                name: 'Goals',
                component: Goals,
                meta: {
                    title: (route: any) => route.name
                }
            },
            {
                path: '/profile',
                name: 'Profile',
                component: Profile,
                meta: {
                    title: (route: any) => route.name
                }
            },
            {
                path: '/goal-:id',
                name: 'Goal',
                component: Goal,
                meta: {
                    title: (route: any) => route.name
                }
            }
        ],
    },

Answer 1

попробуй:

• Чтобы добавить путь '*' в конце маршрутизатора
• Удалить / на дочерних маршрутах, см. https://router.vuejs.org/guide/essentials/nested-routes.html

Как это:

{
      path: '/',
      name: 'MainPage',
      component: MainPage,
        meta: {
            title: (route: any) => 'Goal list'
        },
        children: [
            {
                path: '',
                name: 'Goals',
                component: Goals,
                meta: {
                    title: (route: any) => route.name
                }
            },
            {
                path: 'profile',
                name: 'Profile',
                component: Profile,
                meta: {
                    title: (route: any) => route.name
                }
            },
            {
                path: 'goal-:id',
                name: 'Goal',
                component: Goal,
                meta: {
                    title: (route: any) => route.name
                }
            },
            {
                path: '404',
                name: '404',
                component: NotFound,
            },
            {
                path: '*',
                redirect: '/404'
            },
        ],
    },