子路线组件未在Vue JS中呈现 [英] Child route component not rendering in vue js

问题描述

我已定义路线，例如

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

一切正常，但是白白如果访问子路线，浏览器中的url会更改，但组件不会加载。访问父级和子级路径时，仅显示父级权限。
我正在呼叫类似

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>

推荐答案

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

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>

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

如果您的路径是独立的，则不要将其设为子代。如果您注册子路径，请继续输入 < router-view>< / router-view> （在任何嵌套级别）。
如果从 / 开始嵌套路由，它将被视为根路径。
了解详情

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

这篇关于子路线组件未在Vue JS中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！