Child route component not rendering in vue js [duplicate]

问题

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>

回答1:

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

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

if your path is independent, do not make it as child.If you register child route keep putting <router-view></router-view> on parent component (on any nested level). if you start nested route with / it will be treated as root path. Read more

回答2:

https://router.vuejs.org/en/essentials/nested-routes.html

According to the doc, your child route will be render in your nested <router-view></router-view>. Check you have the correct setup.

来源：https://stackoverflow.com/questions/50247097/child-route-component-not-rendering-in-vue-js

标签

Vue.js

routing

components

vue-component