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

新手上路,请多包涵

我有一个 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 许可协议

阅读 322
2 个回答

侧边栏消失的原因是所有组件都呈现在第一个 <router-view> 除了 <main-header> 之外。

您应该通过在侧边栏路由器中配置 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
        }
      ]
    }
  ]
})

嵌套路线 中的更多信息

原文由 adoug 发布,翻译遵循 CC BY-SA 3.0 许可协议

您需要使用 named views 。为视图提供 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
      }
    }
  ]
})

请参考 官方文档

原文由 Tuan Pham 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题