How set default router for children router and set 404 page in child routes?

Question

I have main page with included child routers. In that routers i have default router(Goals component) for main page. But when i add 404 page, my child router all time set to 404 page.

How correctly set child default router and set 404 page?

my routers

{
      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

try :

• To add path '*' at end of router
• Remove / on children routes, refer to https://router.vuejs.org/guide/essentials/nested-routes.html

Like this:

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