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

【问题标题】：Router link not calling router view on nested routes路由器链接未在嵌套路由上调用路由器视图
【发布时间】：2017-10-22 18:13:02
【问题描述】：

我有一个路由器

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>

当我单击第一个路由器链接时，在路由器视图上渲染视图没有问题。但是当我点击childrens的路由器链接时，就不行了，

有人知道为什么吗？

【问题讨论】：

是因为你使用的是append吗？你是什么意思“它不起作用”？
对不起，我只是在用这个追加做一些测试。无论有没有它，它仍然无法正常工作。我的意思是它不会在标签上呈现组件
您点击了链接却没有任何反应？控制台没有错误？
没有错误，唯一的问题是当我查看vue开发工具时，没有router-view组件。没有错误，没有警告
试试:to="{ name: child.name }"

标签： vuejs2 vue-router

【解决方案1】：

发生此问题是因为您在嵌套路由的路径前添加了正斜杠 /。

来自documentation on nested routes：

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

这意味着，即使您的 "listar" 路由是您的 "usuarios" 路由的子路径，路径也是 /listar，而不是 /usuarios/listar。

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

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

【讨论】：

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

【解决方案2】：

我终于明白了。

如果你有孩子，父亲组件也应该有一个<router-view>

在这里找到答案：Vue router2 not catching deep nested routes

感谢大家的帮助

【讨论】：