How to set a dynamic route in a child element?

Question

Vue.js

I'm trying to make a route like this:
localhost:8080/#/goals - List
localhost:8080/#/goals/1 - View record by ID

Now it falls on the 404 page. Can you please tell me how to implement this?
And if some points in the code are not correct or you can do better, I will be glad to comments)

export default new Router({
  linkExactActiveClass: 'active',
  routes: [
    {
      path: '/',
      redirect: 'dashboard',
      component: DashboardLayout,
      children: [
        {
          path: '/',
          name: 'Главная',
          component: () => import(/* webpackChunkName: "demo" */ './views/Main/Index.vue')
        },
        {
          path: '/goals',
          // redirect: '/',
          component: GoalLayout,
          children: [
            {
              path: '/',
              name: 'Цели',
              component: () => import(/* webpackChunkName: "demo" */ './views/Goals/GoalsList.vue')
            },
            {
              path: '/:id',
              name: 'Цель',
              component: () => import(/* webpackChunkName: "demo" */ './views/Goals/GoalView.vue')
            },
          ]
        },
      ]
    },
    {
      path: '/',
      redirect: 'login',
      component: AuthLayout,
      children: [
        {
          path: '/login',
          name: 'login',
          component: () => import(/* webpackChunkName: "demo" */ './views/Login.vue')
        },
        {
          path: '/register',
          name: 'register',
          component: () => import(/* webpackChunkName: "demo" */ './views/Register.vue')
        }
      ]
    },
    {
      // сопоставляется со всем
      path: '*',
      component: NotFoundLayout,
    }
  ]
})

Answer 1

Remove the leading /one from all children.