Vue-Router中的命名视图

1、什么是命名视图?

命名视图和具名插槽很像,都是让不同的出口显示不同的内容

命名视图就是当路由地址被匹配的时候同时指定多个出口,并且每个出口中显示的内容不同

需要同时 (同级) 展示多个视图,而不是嵌套展示就可以使用命名视图

一个视图使用一个组件渲染,因此对于同一个路由,多个视图就需要多个组件。确保正确使用components配置带上s


,命名视图


完整的代码


结果显示

2、嵌套命名视图

可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例:


面板

Nav:只是一个常规的组件

UserSettings:是一个视图组件

UserEmailsSubscriptions、UserProfile、UserProfilrPreview是嵌套的视图组件

UserSettings组件的<template>部分应该是类似下面的这段代码


代码

路由配置来完成布局


路由配置
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容