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

Question

[Bekkazy]

Пытаюсь сделать route типа такого:
localhost:8080/#/goals - Список
localhost:8080/#/goals/1 - Просмотр записи по ID

Сейчас падает на страницу 404. Подскажите пожалуйста, как это реализовать?
И если по коду какие то моменты не правильные или можно сделать лучше, буду рад комментариям)

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

[Aetae]

Убери ведущую / из всех children.

Comments

[Bekkazy]

Спасибо, заработало!