vue router 的命名视图

vue router 能够很好的解决页面跳转的问题。

但是以前的用法，我只会在组件里最多写一个 RouterView ，那么如何同时存在多个呢？

只需要将原来的代码

component: Home,

改成

      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },

注意 component 变成了 components

然后这样使用

<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>