Vue Router 命名视图(Named Views)实战指南:多出口布局与嵌套命名视图
前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载命名视图Named Views是 Vue RouterVue 2 官方路由中用于在同一路由下同时渲染多个组件出口的核心机制。当你需要构建侧边栏 主内容区这类非嵌套的并行布局或在某个页面内同时展示多个独立区块时命名视图是最直接、最官方的解决方案。读完本篇你将掌握命名视图的基本用法、嵌套命名视图的复杂布局组织方式以及它背后的源码实现原理与配套的类型约束。为什么需要命名视图默认情况下router-view是页面中唯一的组件出口——一条路由匹配后只渲染一个组件。但在真实业务中我们常常需要同时展示多个视图而不是把它们层层嵌套。例如一个后台管理布局左侧sidebar视图渲染导航菜单右侧main视图渲染页面主体内容。这种情况下与其把两个区块硬塞进一个组件里嵌套管理不如在模板中放置多个出口outlet并给每个出口起一个名字让同一条路由一次性为每个出口提供对应的组件——这正是命名视图Named Views的用武之地。关键约定不带name属性的router-view会被自动赋予名字default。基本用法模板与components选项在模板中放置多个router-view通过name属性区分彼此router-view classview one/router-view router-view classview two namea/router-view router-view classview three nameb/router-view第一个router-view没有name因此它对应的是名为default的出口另外两个分别对应a和b。视图是由组件渲染的所以多个视图意味着同一条路由需要多个组件。此时必须使用components选项注意是复数带s而不是单数形式的componentconst router new VueRouter({ routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } } ] })当访问/时Vue Router 会同时把Foo渲染到default出口、Bar渲染到a出口、Baz渲染到b出口三个组件互不干扰、并行展示。一个可运行的最小示例仓库中的 examples/named-views/app.js 给出了完整可运行版本它定义了两个路由/与/other同一套三个出口通过切换路由让组件组合发生轮换const router new VueRouter({ mode: history, base: __dirname, routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } }, { path: /other, components: { default: Baz, a: Bar, b: Foo } } ] })对应页面入口为 examples/named-views/index.html配合 examples/webpack.config.js 即可在本地运行体验。底层原理命名视图是如何渲染的命名视图的渲染逻辑集中在router-view组件实现 src/components/view.js 中理解了它你就理解了整个机制1. 出口名称来自 props默认值是defaultprops: { name: { type: String, default: default } }这正是不带name的router-view自动成为default出口的实现来源src/components/view.js。2. 按匹配深度与名称取出组件渲染函数通过向上遍历父链计算当前视图的嵌套深度depth然后从匹配路由记录中按名字取组件const matched route.matched[depth] const component matched matched.components[name]如果当前路由未匹配或该名称没有配置组件则渲染空节点src/components/view.js。也就是说components对象里的每个键最终会与对应name的router-view一一对应。3. 路由配置阶段component与components的统一在构建路由表时src/create-route-map.js 会做归一化处理components: route.components || { default: route.component }单数component写法会被自动包装成{ default: route.component }与components写法殊途同归。这也解释了为什么两种写法可以混用而不冲突。嵌套命名视图复杂布局的组织方式命名视图还可以与嵌套路由children组合使用构造出非常复杂的页面布局。官方文档 docs/guide/essentials/named-views.md 给出了一个典型的设置面板案例/settings/emails /settings/profile ----------------------------------- ------------------------------ | UserSettings | | UserSettings | | ------------------------------ | | ------------------------- | | | Nav | UserEmailsSubscriptions | | ------------ | | Nav | UserProfile | | | | ------------------------- | | | -------------------- | | | | | | | | | UserProfilePreview | | | ------------------------------ | | ------------------------- | ----------------------------------- ------------------------------布局中各角色的定位是Nav普通组件不属于路由管理的出口UserSettings视图组件它内部再放置router-view出口UserEmailsSubscriptions、UserProfile、UserProfilePreview嵌套视图组件由内层出口渲染。视图组件的模板UserSettings组件的template大致如下注意它内部同时有默认出口与命名出口!-- UserSettings.vue -- div h1User Settings/h1 NavBar/ router-view/ router-view namehelper/ /div对应的路由配置通过children把命名视图放到子路由层级{ path: /settings, // 顶层同样可以使用命名视图 component: UserSettings, children: [{ path: emails, component: UserEmailsSubscriptions }, { path: profile, components: { default: UserProfile, helper: UserProfilePreview } }] }当访问/settings/emails时UserSettings内的默认出口渲染UserEmailsSubscriptions当访问/settings/profile时默认出口渲染UserProfile而名为helper的出口渲染UserProfilePreview。这就是上图两种布局切换的实现方式。嵌套路由的入口组件写法可参考 examples/nested-routes/app.js其中Parent组件内嵌router-view classchild渲染子路由组件它展示了视图组件内部再放出口的标准模式。命名视图与 props 传递命名视图的组件同样可以使用props选项解耦路由参数。注意使用命名视图时props必须按每个命名视图分别定义docs/guide/essentials/passing-props.mdconst router new VueRouter({ routes: [ { path: /user/:id, components: { default: User, sidebar: Sidebar }, props: { default: true, // 函数模式把查询参数映射为组件的 search prop sidebar: route ({ search: route.query.q }) } } ] })props的取值支持布尔、对象、函数三种模式对应default: true、静态对象、route ({...})函数。在渲染时src/components/view.js 会按出口名称取出matched.props[name]并通过fillPropsinData注入对应组件——每个命名视图拿到属于自己的那组 props互不串扰。类型定义与注意事项在 TypeScript 类型声明 types/router.d.ts 中路由配置被拆分为两种形态interface RouteConfigSingleView extends _RouteConfigBase { component?: Component props?: boolean | Object | RoutePropsFunction } interface RouteConfigMultipleViews extends _RouteConfigBase { components?: DictionaryComponent props?: Dictionaryboolean | Object | RoutePropsFunction } export type RouteConfig RouteConfigSingleView | RouteConfigMultipleViews由此可以明确两点component与components不可混用于同一条路由配置单出口用component配布尔/对象/函数形式的props多出口用components配Dictionary形式的props命名视图的nameprop 类型为string默认值default见 docs-gitbook/kr/api/router-view.md。另外router-view本质是一个普通组件因此它可以与transition、keep-alive组合使用如transitionkeep-aliverouter-view/router-view/keep-alive/transition缓存行为同样按出口生效。仓库验证e2e 测试如何覆盖命名视图仓库为命名视图提供了端到端测试 test/e2e/specs/named-views.js它直接验证了本文的每一个关键行为访问/named-views/后断言三个出口的内容分别为foo、bar、baz即default: Foo, a: Bar, b: Baz的渲染结果点击切换到/named-views/other后断言内容轮换为baz、bar、foo证明同一套出口在路由切换时组件映射随之切换直接访问/named-views/other的首次加载场景验证刷新/直达时的渲染结果一致。这套测试与 examples/named-views/app.js 一一对应是命名视图行为最可靠的可运行说明书。小结命名视图是 Vue Router 中处理一页多出口布局的官方方案模板侧通过router-view name...声明多个出口路由侧通过components对象键对应出口名default为默认出口为每条路由提供多组件映射结合children还能构造嵌套命名视图的复杂布局配合按名称分发的props配置可让每个出口的组件保持与路由的解耦。掌握这一机制你就能游刃有余地搭建侧边栏布局、设置面板、仪表盘等各类多区块页面。赞分享前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载相关推荐如何用MoneyPrinter实现AI驱动的视频SEO优化从元数据生成到多平台发布如何用MoneyPrinter实现AI驱动的视频SEO优化从元数据生成到多平台发布 MoneyPrinter是一款基于MoviePy的开源工具能够自动化创建前端路由Vue Router命名路由和命名视图构建复杂应用布局的最佳实践Vue Router命名路由和命名视图构建复杂应用布局的最佳实践 Vue Router作为Vue.js官方路由库提供了强大的命名路由和命名视图功能让开发者前端路由如何优雅构建复杂布局Vue Router 命名视图终极指南如何优雅构建复杂布局Vue Router 命名视图终极指南 Vue Router 命名视图是 Vue 2 官方路由系统中一个强大而实用的功能它允许开发者在同前端路由上一篇DVWA Docker多容器部署终极指南Nginx反向代理与SSL安全配置下一篇Ultimate Vocal Remover v5.6 人声分离上手教程7 个部分从安装到产出伴奏创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关新闻

CodeIgniter 3.0.2 升级至 3.0.3 实战指南:base_url 自动检测变更与 Host 头注入防护

CodeIgniter 3.0.2 升级至 3.0.3 实战指南:base_url 自动检测变更与 Host 头注入防护

CodeIgniter 3.0.2 升级至 3.0.3 实战指南:base_url 自动检测变更与 Host 头注入防护 【免费下载链接】CodeIgniter Open Source PHP Framework (originally from EllisLab) 项目地址: https://gitcode.com/gh_mirrors/co/CodeIgniter 本文面向正在使用 Code…

2026/9/22 18:07:38 阅读更多 →
使用 Native Image Gradle Plugin 集成 Reachability Metadata:从元数据仓库到 Tracing Agent 的完整实战指南

使用 Native Image Gradle Plugin 集成 Reachability Metadata:从元数据仓库到 Tracing Agent 的完整实战指南

使用 Native Image Gradle Plugin 集成 Reachability Metadata:从元数据仓库到 Tracing Agent 的完整实战指南 【免费下载链接】graal GraalVM compiles applications into native executables that start instantly, scale fast, and use fewer compute resources …

2026/9/22 18:04:16 阅读更多 →
FoundationDB Go 绑定(fdb-go)开发指南:安装、构建与事务编程实战

FoundationDB Go 绑定(fdb-go)开发指南:安装、构建与事务编程实战

FoundationDB Go 绑定(fdb-go)开发指南:安装、构建与事务编程实战 【免费下载链接】foundationdb FoundationDB - the open source, distributed, transactional key-value store 项目地址: https://gitcode.com/gh_mirrors/fo/foundationd…

2026/9/21 15:51:58 阅读更多 →

最新新闻

淘宝排名靠前技巧揭秘:3个源码级优化点,面试必问的底层逻辑

淘宝排名靠前技巧揭秘:3个源码级优化点,面试必问的底层逻辑

淘宝排名靠前技巧揭秘:3个源码级优化点,面试必问的底层逻辑 官方文档堆砌术语,读完还是不会用?这行混久了都知道,真正的硬核知识往往藏在底层实现里。今天不扯虚的,直接拆解淘宝搜索排名的核心逻辑。很多开发者在面试中被问倒,不是不懂业务,而是不懂…

2026/9/22 18:07:24 阅读更多 →
5分钟吃透Reveal源码,手写实现核心逻辑不踩坑

5分钟吃透Reveal源码,手写实现核心逻辑不踩坑

5分钟吃透Reveal源码,手写实现核心逻辑不踩坑 面试被问“Reveal.js 源码是怎么实现页面切换动画的”,你答得上来吗?别慌,很多后端转全栈的兄弟都栽在这。不是让你背代码,而是得懂那套 手写实现…

2026/9/22 18:07:24 阅读更多 →
3步手写实现quicksort,彻底告别排序崩溃焦虑

3步手写实现quicksort,彻底告别排序崩溃焦虑

3步手写实现quicksort,彻底告别排序崩溃焦虑 上周凌晨两点,线上接口突然超时,CPU飙到100%。翻日志一看,全是 java.lang.OutOfMemoryError 和递归栈溢出的 StackOverflowError…

2026/9/22 18:07:24 阅读更多 →
3招搞定爱在星光里性能瓶颈,图解原理告别StackTrace报错

3招搞定爱在星光里性能瓶颈,图解原理告别StackTrace报错

3招搞定爱在星光里性能瓶颈,图解原理告别StackTrace报错 凌晨两点,服务器报警响了,我抓起电脑一看,CPU飙到95%,日志里全是红色的StackTrace。这种报错一堆看不懂的情况,每个后端开发都经历过。别慌,今天咱们不聊虚的,直接…

2026/9/22 18:07:24 阅读更多 →
3CDAEMON乱码速查手册:从堆栈到源码的性能突围

3CDAEMON乱码速查手册:从堆栈到源码的性能突围

3CDAEMON乱码速查手册:从堆栈到源码的性能突围 面对满屏红色的 StackTrace,是不是感觉脑子瞬间宕机?尤其是当 3CDAEMON 相关的日志输出变成一堆 ? 或 �…

2026/9/22 18:07:24 阅读更多 →
CF人物模型底层逻辑拆解:版本升级API变更保姆级教程

CF人物模型底层逻辑拆解:版本升级API变更保姆级教程

CF人物模型底层逻辑拆解:版本升级API变更保姆级教程 版本升级后 API 全变了?别慌,CF人物系统的底层映射没变。 很多老哥在接手项目时,一跑代码就报错,参数对不上,对象引用丢失。 这篇保姆级教程,带你从内存堆栈角度,彻底搞懂 CF…

2026/9/22 18:06:23 阅读更多 →

日新闻

3台商务办公笔记本实测:手写实现环境配置,告别卡半天

3台商务办公笔记本实测:手写实现环境配置,告别卡半天

3台商务办公笔记本实测:手写实现环境配置,告别卡半天 配置环境就卡半天?别怪机器慢,多半是你没选对工具链。在Java、Go或Python的项目现场, 手写实现…

2026/9/22 0:00:41 阅读更多 →
剑帝加点速查手册:3分钟搞懂核心逻辑

剑帝加点速查手册:3分钟搞懂核心逻辑

剑帝加点速查手册:3分钟搞懂核心逻辑 面试被问原理答不上来,是不是常态?别慌。很多开发者对着 GitHub 开源仓库里的代码发呆,看似简单实则暗藏玄机。今天这份【剑帝加点】速查手册,直接带你拆解核心实现,把面试必考的原理讲透。…

2026/9/22 0:00:41 阅读更多 →
手写实现图片压缩网站核心:搞定WebP转换与质量调优

手写实现图片压缩网站核心:搞定WebP转换与质量调优

手写实现图片压缩网站核心:搞定WebP转换与质量调优 复制来的代码跑不通不知道怎么调?别慌,这种“复制粘贴地狱”在开发圈太常见了。尤其是做 图片压缩网站…

2026/9/22 0:00:41 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事:用Flutter给OpenHarmony做一款游戏集合类的App,说白了就是把若干小游戏塞进一个壳里,用统一入口分发。这个方向本身不算新鲜,真正让我花了不少心思的,是首页那堆游戏卡…

2026/9/22 4:32:41 阅读更多 →
Word表格编号全攻略:从列表编号到题注交叉引用

Word表格编号全攻略:从列表编号到题注交叉引用

写Word文档,最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事:今天在表后面多加了两个空白行,明天给客户交稿前发现整个章节的编号全部错位,光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/22 4:38:57 阅读更多 →
从第一个站到第二个站:独立开发者的静态网站选型与落地实践

从第一个站到第二个站:独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年,说实话,第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年,流量惨淡、功能臃肿、代码自己都懒得看第二遍之后,我才慢慢琢磨明白一个道理:第一个网站是练手&…

2026/9/22 8:51:04 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能分类:[AI/大模型]细分主题:AI 增强型 CI/CD 流水线自动化与 GitOps 实践:Agent 工作流、工具调用与任务拆解:从原型到生产的验收清单很多团队在尝试用大…

2026/9/21 15:36:51 阅读更多 →
容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场分类:[工程技术]细分主题:Kubernetes 生产环境运维与排障实战:可复制的项目复盘模板与决策记录大部分团队的事故复盘报告,最后都变成了躺在 Confluence 或钉…

2026/9/21 15:36:51 阅读更多 →
容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步分类:[工程技术]细分主题:Docker 容器化技术与镜像安全管理:核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用(包含 Web 接口、后台…

2026/9/22 2:43:42 阅读更多 →