How to make nested Vue-Router URLs?

Question

Vue.js

Hey!
I ran into a problem, here is the route code:

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/sign-in',
      name: 'sign-in',
      component: () => import('./views/auth/SignIn.vue'),
    },
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Index.vue'),
    },
    {
      path: '/control-panel',
      name: 'control-panel',
      component: () => import('./views/control-panel/Index.vue'),
      children: [
        {
          path: 'users',
          name: 'control-panel.users',
          component: () => import('./views/control-panel/Users.vue')
        },
        {
          path: 'tenders',
          name: 'control-panel.tenders',
          component: () => import('./views/control-panel/Tenders.vue')
        }
      ]
    },
  ]
})


export default router

I did everything as in the documentation ... (I think so).
In general, the essence is this, a page with a URL: control-panel displays its content but its daughter. The URLs contain the same content as the parent. What's wrong? If it is not clear written, write about it.

Answer 1

Is there router-viewinside ./views/control-panel/Index.vue?