Question

我正在寻找一个带有动态侧边栏的布局。边栏本身具有自己的模板，但是我不希望呈现该模板，除非使用了底层的路由器视图。伪代码下方：

<template>
  <transition name="slide">
    <div class="sidebar" v-if="showSidebar">
      <SidebarHeader />
      <router-view name="side"><router-view>
      <SidebarFooter>
    </div>
  </transition>
  <div class=main><router-view></router-view></div>
</template>

有什么明显的方法可以实现吗？我在$router或$route对象上找不到任何属性或函数。

作为一种解决方法，我制作了Sidebar组件，该组件必须用于每个侧边栏视图，但是还有更好的选择吗？

Answer 1

似乎我找到了答案-在路由时需要一些技巧：

{
  path: '',
  component: 'Layout',
  children: [
    { 
      path: '',
      components: { default: SomeMainComponent },
      children: [
        { path: '' },
        { 
          path: '',
          components: { side: SideBox },
          children: [
            path: 'hello',
            component: HelloSidebox
          ]
        } 
      ]
    } 
  ]
}

该空路由{path: ''}是为了防止显示与确切路由匹配的下一条路由，并且仅对任何匹配的子路由呈现SideBox组件。

检测到使用命名视图

1 个答案: