我有一个 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/>
其中一个在另一个组件内,如上面的示例?
原文由 wrahim 发布,翻译遵循 CC BY-SA 4.0 许可协议
侧边栏消失的原因是所有组件都呈现在第一个
<router-view>
除了<main-header>
之外。您应该通过在侧边栏路由器中配置
children
来使用嵌套路由器,例如:嵌套路线 中的更多信息