如何为子路由器设置默认路由器并在子路由中设置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'
            },
        ],
    },