Child route component not rendering in vue js [duplicate]

Question

i have defined route like

{
        path:'/admins',
        name:'admin.admins',
        component: Admin,
        children: [
            {
              path:'add',
              name:'admin.add',
              component:addAdmin
            },
            {
              path:'edit/:id',
              name:'admin.edit',
              component:editAdmin
            }
        ]
    }

if i declare children route outside children like

{
        path:'/admins',
        name:'admin.admins',
        component: Admin
    },
    {
      path:'/add',
      name:'admin.add',
      component:addAdmin
    },
    {
      path:'/edit/:id',
      name:'admin.edit',
      component:editAdmin
    }

everything works fine but while visiting child routes, url in browser changes but component do not load. Only parent compenent shows up while visiting parent and child path. I am calling routes like

<router-link :to="{ name:'admin.add' }"><i class="fa fa-plus"></i> Add Admin</router-link>

Answer 1

When using nested routes, the child component is dependent on the parent component. To render the child component while visiting the child path you must call

<router-view></router-view> inside the parent component too.

If your path is independent, do not make it as a child. If you register the child route keep putting <router-view></router-view> on the parent component (on any nested level).

If you start nested route with / it will be treated as root path. Read more