命名视图

有时候想同时（同级）呈现多个视图，而不是嵌套呈现，例如创建一个布局，有 headbar（导航）、sidebar（侧边栏）和 main（主内容）3 个视图，这时命名视图就派上用场了。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。简单来说，命名视图就是给 <router-view> 设置名字，从而达到不同的 <route-view> 显示不同的内容，如示例代码7-6-1所示。

<div id="app">
    <router-view name="headbar"></router-view>
    <router-view name="sidebar"></router-view>
    <div class="container">
        <router-view></router-view>
    </div>
</div>
...
const Main = {
    template: '<div>Main</div>',
}
const HeadBar = {
    template: '<div>Header</div>',
}
const SideBar = {
    template: '<div>SideBar</div>',
}
// 配置路由信息
const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: [
        {
            path: '/',
            components: { // 采用components设置项
                default: Main,
                headbar: HeadBar,
                sidebar: SideBar,
            }
        }
    ]
})

在上面的代码中，针对一个路由设置了多个视图作为组件来渲染，<router-view name="headbar"></route-view> 中的 name 属性和 components 对象中的 key 要对应，表示这个 <route-view> 会被替换成组件的内容，default 表示如果没有指定 name 属性，就选择默认的组件来替换对应的 <route-view>。这样就实现了一个页面中有多个不同的视图。

但是，这种在同一个页面使用多个 <route-view> 的情况，特别是在单页应用中，对于大多数业务来说并不常见，一般要抽离出一个经常变动的内容，将它放入 <route-view>，而对于那些不变的内容，例如 headbar 或者 sidebar，可以单独封装成一个组件，在根组件中将它们作为子组件来导入。代码如下：

<div id="app">
    <headerbar></headerbar>
    <sidebar></sidebar>
    <div class="container">
        <router-view class="view"></router-view>
    </div>
</div>

命名视图的重点在于浏览器访问同一个 URL 可以匹配到多个视图组件，当切换路由时，这些组件可以同步变化，但是具体在哪些场合使用，还需要根据业务来决定，代码如下：

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: [
        {
            path: '/', // 不同路径
            components: {
                default: Main,
                headbar: HeadBar,
                sidebar: SideBar,
            }
        },
        {
            path: '/other', // 不同路径
            components: {
                default: OtherMain,
                headbar: OtherHeadBar,
                sidebar: OtherSideBar,
            }
        }
    ]
})