vue-router命名视图+路由嵌套

有这样一个需求，页面分为左右两个区域，两个区域的内容可能会各自变化，如果实现打开页面左右区域均有内容显示，且支持单独变化

 *分析：

左右两个要同时显示，自然想到用使用命名视图，在compents中将多个组件放在一起展示，但是左右两侧的router-view中所放的内容是会变化的，这该如何解决呢？在单个router-view的时候，切换router-view显示的内容，切换path即可，那在多个router-view的时候，能否还能继续使用切换path的方式来改变显示的内容呢？沿着这个思路，还真把功能实现， 只是实现方式感觉很笨拙。

router

const routes = [
  {
    path: "/",
    // MainPage用于承放页面左右两区域（用两个命名视图来占位：left-container、right-container）
    component: MainPage,
    children: [
      { path: "/", redirect: "/content" },
      {
        path: "content",
        // components让左右内容组件同时显示
        components: {
          "left-container": LeftContainer,
          "right-container": RightContainer,
        },
        // 子路由将左右两侧的组件组合起来显示
        children: [
          { path: "/content", redirect: "/content/welcome_and_camera" },
          {
            path: "welcome_and_camera",
            // 各自占位
            components: {
              "left-content": Welcome,
              "right-content": CameraVideo,
            },
          },
          {
            path: "facereco_and_camera",
            // 各自占位
            components: {
              "left-content": FaceRecoResult,
              "right-content": CameraVideo,
            },
          },
          {
            path: "welcome_andschool",
            // 各自占位
            components: {
              "left-content": Welcome,
              "right-content": School,
            },
          },
        ],
      },
    ],
  },

 

MainPage.vue

<template>
  <div id="container">
    <div id="left-panel">
        <router-view name="left-container"></router-view>
    </div>
    <div id="right-panel">
      <router-view name="right-container"></router-view>
    </div>
  </div>
</template>

LeftContainer.vue

<template>
  <div>
    <h1>left</h1>
    <router-view name="left-content"></router-view>
  </div>
</template>

 

RightContainer

<template>
  <div>
    <h1>right</h1>
    <router-view name="right-content"></router-view>
  </div>
</template>

 

效果：