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