有這樣一個需求，頁面分為左右兩個區域，兩個區域的內容可能會各自變化，如果實現開啟頁面左右區域均有內容顯示，且支援單獨變化

*分析：

左右兩個要同時顯示，自然想到用使用命名檢視，在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>

效果：