子路由组件未在vue js中呈现[重复]答案

【问题标题】：Child route component not rendering in vue js [duplicate]子路由组件未在vue js中呈现[重复]
【发布时间】：2018-10-19 04:50:03
【问题描述】：

我已经定义了类似的路线

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

如果我声明子路由像孩子一样

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

一切正常，但在访问子路由时，浏览器中的 url 发生变化，但组件不加载。访问父子路径时仅显示父组件。我正在调用类似的路线

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

【问题讨论】：

分享现场演示以及您如何称呼这些路线？
问题已更新。请检查一下
您是否为父组件添加了router-view？检查this answer
请分享现场演示或至少component: Admin, ?

标签： vue.js routing components vue-component

【解决方案1】：

使用嵌套路由时，子组件依赖于父组件。要在访问子路径时渲染子组件，您必须调用

<router-view></router-view>也在父组件内部。

如果您的道路是独立的，请不要将其作为一个孩子。如果您注册子路由，请继续将 <router-view></router-view> 放在父组件上（在任何嵌套级别上）。

如果您以/ 开始嵌套路由，它将被视为根路径。 Read more

【讨论】：

【解决方案2】：

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

根据文档，您的子路由将在嵌套的<router-view></router-view> 中呈现。检查您的设置是否正确。

【讨论】：

我已经做到了。