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的知识点还有很多。我接触的时间也不算太长。希望能与大家一起进步学习！