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

问题描述

我已经定义了类似的路线

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
    }

一切正常，但在访问子路由时，浏览器中的 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>

推荐答案

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

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>也在父组件内部.

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

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

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