Vuejs2 路由器链接未在嵌套路由上调用路由器视图

我有一个路由器

routes: [
  {
    path: '/',
    name: 'home',
    meta : {
      label : 'Home'
    },
    component: Home
  },
  {
    path: '/usuarios',
    name: 'usuarios',
    meta : {
      label : 'Usuarios'
    },
    component: Users,
    children :  [
      {
        path: '/listar',
        meta : {
          label : 'Listar'
        },
        name      : 'listUser',
        component: Wrapper,
      },
      {
        path: '/cadastrar',
        meta : {
          label : 'Cadastrar !'
        },
        name      : 'userCreate',
        component: UserCreate
      },
    ],

  },

]

我有一个在导航栏上显示这个路由器的模板

<div class="main">

  <ul class="menu-list">
    <li v-for="item in menus" v-on:click="toggleActive(item)">
      <router-link class="font-gray" :to="item.path" :exact="true">{{item.meta.label}}</router-link>
      <ul class="menu-list" v-if="item.children && item.isActive">
        <li v-for="child in item.children">
          <router-link class="font-gray" :to="{path : item.path+child.path}" :exact="true" :append="true" >{{child.meta.label}}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</div>

{{item.meta.label}


{{child.meta.label}

当我单击第一个路由器链接时，视图在路由器视图中呈现没有问题。但是当我点击孩子们的路由器链接时，它不起作用

---

有人知道为什么吗

发生此问题的原因是嵌套路由的路径前面有前斜杠

/

从：

请注意，以/开头的嵌套路径将被视为根路径。这允许您利用组件嵌套，而不必使用嵌套URL

这意味着，即使您的

“listar”

路由是

“usuarios”

路由的子路由，路径也是

/listar

，而不是

/usuarios/listar

您应该从嵌套管线的路径中删除正斜杠，然后在模板中指定路径，如下所示：

:to="{ path : item.path + '/' + child.path }"

---

我终于明白了

如果您有子组件，父组件也应该有一个

在这里找到了答案：

---

感谢大家尝试帮助

是因为您正在使用

append

？你说“它不工作”是什么意思？对不起，我只是在用这个附件做一些测试。不管有没有，它仍然不起作用。我的意思是，它不会在标记上呈现组件。如果单击链接，什么也不会发生？控制台中没有错误？没有错误，唯一的问题是当我查看vue开发工具时，路由器视图组件不在那里。没有错误，没有警告尝试

：to=“{name:child.name}”

我删除了正斜杠，只让“listar”仍然不工作。但是现在路由器视图在vue开发工具上仍然可见