Question

给出以下布局组件：

布局：

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

有没有一种方法可以指定深度嵌套的路线来使用sidebar网点？

const routes = {
  path: '',
  components: { default: SomeMainComponent },
  children: [{
    path: 'foo',
    children: [{
      path: 'bar',
      components: { sidebar: BarSide }
    }]
  }]
}

似乎路由器只是在寻求解决直接路由父级的路由器出口-如果将components: { side: BarSide }移到foo定义，则该组件将按预期呈现。就这样，甚至都没有创建组件。

有没有办法做到这一点？

JsFiddle：https://jsfiddle.net/xptkhf4z/5/-单击With helper链接会更新路径，保留呈现的默认组件，但不呈现辅助插槽中的其他组件。

Answer 1

尽管我没有完整的答案，但您似乎必须在每个嵌套级别上都包含一个组件。那可以是您的页面组件或布局组件。

这应该有效：

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

DummyLayoutComponent应该是中性的布局，因为它已添加到SomeMainComponent的布局中。

我觉得有点尴尬，我们似乎必须定义一个“空”布局才能使它正常工作。但是也许我只是错过了一个重点。

Vue路由器和深度嵌套的路线

1 个答案: