Vue 命名视图是个啥？

除了命名路由外，还有一种配置路由的方式，叫命名视图。命名视图是个啥？就是在单个路由可以定义多个命名组件。以前我们用一个component对应一个组件的名称。那命名视图是什么情况呢？

上例子

路由需要这样配置

const nav = { template: '<div>我是导航栏</div>' }
const sidebar = { template: '<div>我是侧边栏</div>' }

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/',
        // a single route can define multiple named components
        // which will be rendered into <router-view>s with corresponding names.
        components: {
            nav: Bar,
            sidebar: Baz
            }
        }
    ]
})

在一个根路径下定义了两个命名的组件。注意！这里components（需要加s）

如何使用？

这个时候派上我们的<router-view>的name属性

如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。

<div id="app">
    <router-view name='nav'></router-view>
    <router-view name='sidebar'></router-view>
</div>

这样根路径下就渲染出了两个组件的视图。

以后就用博客总结知识点，分享技术了。Vue.js的知识点还有很多。我接触的时间也不算太长。希望能与大家一起进步学习！