Question

我已经定义了像

这样的路线

{
        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>

Answer 1

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

在父组件中也是

<router-view></router-view>。

如果您的路径是独立的，请不要将其作为子项。如果您注册子路由，请继续将<router-view></router-view>放在父组件上（在任何嵌套级别上）。如果您使用/启动嵌套路由，它将被视为根路径。 Read more

Answer 2

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

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

子路径组件未在vue js中呈现

2 个答案: