Vue.js Vue路由器和深度嵌套路由

给定以下布局组件：

布局：

<template>
  <div class="container">
    <div class="sidebar-container">
      <router-view name='sidebar'></router-view>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

路由器似乎只想解析直接路由父级的路由器出口-如果我将

组件：{side:BarSide}

移动到

foo

定义，那么组件将按预期呈现。按原样，甚至并没有创建组件

有没有办法做到这一点

---

JsFiddle:-单击带有助手的

链接更新路由，保持默认组件的渲染，但不在助手插槽中渲染附加组件。
虽然我没有完整答案，但您似乎必须在每个嵌套级别上包含一个组件。可以是页面组件，也可以是布局组件

这应该起作用：

const routes = {
  path: '',
  components: { default: SomeMainComponent },
  children: [{
    path: 'foo',
    component: () => import('layouts/DummyLayoutComponent'),
    children: [{
      path: 'bar',
      components: { sidebar: BarSide }
    }]
  }]
}

DummyLayoutComponent
应该是一个中性布局，因为它被添加到
SomeMainComponent
的布局中

我觉得有点尴尬，我们似乎不得不定义一个“空”的布局来让它工作。但也许我遗漏了一个重要的问题。
虽然我没有完整的答案，但您似乎必须在每个嵌套级别上包含一个组件。可以是页面组件，也可以是布局组件

这应该起作用：

const routes = {
  path: '',
  components: { default: SomeMainComponent },
  children: [{
    path: 'foo',
    component: () => import('layouts/DummyLayoutComponent'),
    children: [{
      path: 'bar',
      components: { sidebar: BarSide }
    }]
  }]
}

DummyLayoutComponent
应该是一个中性布局，因为它被添加到
SomeMainComponent
的布局中

我觉得有点尴尬，我们似乎不得不定义一个“空”的布局来让它工作。但也许我遗漏了一个重要的问题。
为什么你的路由器视图名
侧边栏
，但在路由定义中它的
侧边
仅是？@kcsujeet-Typo-它只是一个伪代码，用来突出我遇到的问题。我还添加了JSFIDLE链接。@kcsujeet-我多次阅读文档，没有发现关于深度嵌套路由的任何帮助。JSFIDLE示例在所有路径中定义了一个组件，但问题仍然存在。导航到卢瓦尔滕贝格的答案。这应该行得通。使用vue路由的元属性，您应该能够在需要的地方呈现vue组件。它似乎可以工作-我仍然认为我将使用一个插件，因为我可能需要为上述解决方案提供一些额外的电源（如同时多个侧栏）。但是是的，使用meta而不是组件基本上是可行的（我可能需要使用
$route.matched
而不是
$route.meta
来进行更深层次的嵌套路由）为什么你的路由器视图名为
侧边栏
，但在路由定义中它的
侧边
仅是？@kcsujeet-Typo-这只是一个伪代码来突出我遇到的问题。我还添加了JSFIDLE链接。@kcsujeet-我多次阅读文档，没有发现关于深度嵌套路由的任何帮助。JSFIDLE示例在所有路径中定义了一个组件，但问题仍然存在。导航到卢瓦尔滕贝格的答案。这应该行得通。使用vue路由的元属性，您应该能够在需要的地方呈现vue组件。它似乎可以工作-我仍然认为我将使用一个插件，因为我可能需要为上述解决方案提供一些额外的电源（如同时多个侧栏）。但是是的，使用meta而不是组件基本上是可行的（我可能需要使用
$route.matched
而不是
$route.meta
来处理更深层次的嵌套路由），这基本上就是我最后对嵌套路由所做的事情——否则子路由根本不会呈现，因为没有父路由器视图（不过我将其命名为AbstractRouteView）。您是对的，这可以用来定义所有必需的插槽，可能是通过在
$scopedSlots
对象上循环来实现的。但这仍然是次优的，因为它需要插槽所有者和子对象之间的所有组件来包含该插槽。我最终使用自定义“容器”解决了它插件，有点像rails中

的

content\u。这基本上就是我最终为嵌套路由所做的事情——否则子路由根本不会呈现，因为没有父路由器视图（不过我将其命名为AbstractRouteView）。您是对的，这可以用来定义所有必需的插槽，可能是通过在
$scopedSlots
对象上循环来实现的。但这仍然是次优的，因为它需要插槽所有者和子对象之间的所有组件都包含该插槽。我终于用自定义“容器”解决了这个问题插件，有点像rails中的
content\u。