Vue-router 和同一页面中的多个路由？

Question

我们正在创建一个基于 Vue 的 Web 应用程序，它在历史模式下使用 vue-router。 一切都适用于在不同页面之间导航，但现在我们被要求在虚拟对话中打开一些页面，这会导致问题。 最初我们尝试使用 iframe，但这会产生加载影响。

请注意，“虚拟对话”只是一个设计为位于其余内容上方的 div，它被装饰为一个窗口，可以显示 Vue 应用程序中的其他页面。 这不是真正的浏览器级别的对话。

我们构建站点的方式：

• 组件/ContentDialogue.vue
• 布局/MainLayout.vue
• 页数/
  • 我的页面
  • MyPage2.vue
  • MyPage3.vue
• router/index.js <-- 路由器设置在这里
• 应用程序
• 主文件

这里 MainLayout 有一个<router-view/> ，所以当我们输入路径时，它会显示适当的内容。

对话打破了一切，因为它在技术上需要能够显示框架中的任何其他页面。 这导致了这样的想法，即MainLayout.vue变为：

<template>
  <div class="layout main-layout">
    <div class="page-container">
      <router-view />
    </div>
    <div v-if="showDialogue" class="dialogue-page-container">
      <router-view />
    </div>
  </div>
</template>

Vue 路由器设置在router/index.js并在 main 中提供为：

  const app = {
    router,
    render: h => h(App)
  };

  const vue = new Vue(app);
  vue.$mount('#app');

虽然这在概念上看起来不错，但我不确定如何让它真正起作用。 对于对话，我们可以通过传递给 MainLayout 的事件指示它打开，或者将其包含在查询值中， such as /mypage?popup=/mypage2 ，但是这如何转换为路由器和布局？

谁能建议我们如何使这项工作？

Answer 1

同时显示多个视图而不是嵌套它们，例如创建带有侧边栏视图和主视图的布局。 这就是命名视图派上用场的地方。 您可以拥有多个插座并为每个插座命名，而不是在您的视图中只有一个插座。 没有名称的路由器视图将被默认作为其名称。

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

视图是使用组件渲染的，因此多个视图需要多个组件才能用于同一路由。 确保使用组件（带有 s）选项：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // short for LeftSidebar: LeftSidebar
        LeftSidebar,
        // they match the `name` attribute on `<router-view>`
        RightSidebar,
      },
    },
  ],
})

有关完整说明，请参阅：https ://next.router.vuejs.org/guide/essentials/named-views.html