javascript - 在 Vue.js 中如何使用多个路由 View ，其中一个在另一个组件中？

Question

我有一个 Vue.js 单页应用程序，其中有一个使用 <router-view/> 的主导航栏。呈现不同的页面。

像这样:

<main-header/> <!-- navigation links -->
<transition name="slide-fade" mode="out-in">
  <router-view/> <!-- different pages -->
</transition>

在其中一个页面中，我有一个侧边栏，其中包含更多导航链接(使用 <router-link/> 就像主导航栏一样。

像这样:

<sidebar/> <!-- navigation links -->
<div class="content">
  <transition name="slide-fade" mode="out-in">
    <router-view/> <!-- content beside the sidebar -->
  </transition>
</div>

当我单击侧边栏导航链接时，我希望侧边栏旁边的内容和 url 都发生变化。但是，我丢失了侧边栏，只获取了要在内容部分呈现的组件。

我怎样才能达到预期的效果？如何使用多个 <router-view/>其中一个在另一个组件中，就像上面的例子一样？

Answer 1

您需要使用命名 View 。为 View 提供 name 属性。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>

像这样配置它们

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar
      }
    }
  ]
})

请引用official docs .