在 Vue.js 中，如何使用多个路由视图，其中一个在另一个组件中

发布于01月05日

我有一个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/>，其中一个在另一个组件内，如上面的示例？

推荐答案

侧边栏消失的原因是，除了<main-header>之外，所有组件都在前<router-view>个渲染.

您应该通过在侧栏路由中配置children来使用嵌套路由，如:

const router = new VueRouter({
  routes: [
    { path: '/your-sidebar-url', component: your-sidebar-page,
      children: [
        {
          // A will be rendered in the second <router-view>
          // when /your-sidebar-url/a is matched
          path: 'a',
          component: A
        },
        {
          // B will be rendered in the second <router-view>
          // when /your-sidebar-url/b is matched
          path: 'b',
          component: B
        }
      ]
    }
  ]
})

更多信息请点击nested routes