vue-router 命名视图（Named Views）完全指南：多视图布局与嵌套命名视图实战-北京尧图网络

vue-router 命名视图Named Views完全指南多视图布局与嵌套命名视图实战【免费下载链接】vue-router The official router for Vue 2项目地址: https://gitcode.com/gh_mirrors/vu/vue-router本篇技术指南围绕 Vue 2 官方路由库 vue-router 的**命名视图Named Views**特性展开讲解如何在同一路由下并行渲染多个视图出口outlet从而构建类似sidebarmain、设置面板等复杂页面布局并深入嵌套命名视图的组合用法。读完本文你将掌握router-view的name属性、路由配置中的components复数选项、命名视图与嵌套路由的搭配方式以及这些能力在 vue-router 源码src/components/view.js、src/create-route-map.js与官方示例examples/named-views/app.js中的真实实现。一、什么是命名视图让一个路由同时渲染多个视图在日常开发中我们最常见的布局是一个路由对应一个组件通过router-view单出口渲染。但有些场景需要在同一时刻显示多个视图而不是层层嵌套——典型例子是带sidebar侧边栏和main主内容区的页面布局。vue-router 的命名视图正是为此而生不再局限于单一的视图出口你可以在模板中放置多个router-view并给每一个命名。没有name属性的router-view会被自动赋予默认名default。router-view classview one/router-view router-view classview two namea/router-view router-view classview three nameb/router-view上面的模板声明了三个视图出口第一个没有命名对应default后两个分别命名为a与b。从源码看router-view的默认名在 vue-router 的视图组件实现中name属性的默认值正是default// src/components/view.js name: RouterView, functional: true, props: { name: { type: String, default: default } }渲染时组件会从当前匹配到的路由记录中按name取出对应组件// src/components/view.js const matched route.matched[depth] const component matched matched.components[name]也就是说命名视图的核心机制是router-view namex从当前路由匹配记录matched.components中查找名为x的组件来渲染。若未匹配到路由或未配置对应名称的组件则渲染空节点返回h()。二、为同一路由配置多个组件components选项一个视图由一个组件渲染因此多个视图就需要为同一条路由配置多个组件。此时必须使用带 s 的components选项而不是单数componentconst router new VueRouter({ routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } } ] })这条配置的含义是当 URL 命中/时无名的router-view渲染Foonamea的router-view渲染Barnameb的router-view渲染Baz。三个视图同时渲染、互不嵌套共同构成一个多栏页面。源码中的关键转换component与components的统一在 vue-router 内部单数component与复数components会被归一化为同一种结构。在 src/create-route-map.js 的addRouteRecord中const record: RouteRecord { path: normalizedPath, regex: compileRouteRegex(normalizedPath, pathToRegexpOptions), components: route.components || { default: route.component }, ... }也就是说即使你只写了单数component: Foo内部也会被转换为{ default: Foo }。命名视图正是复用了这套机制components是一个以视图名为 key、组件为 value 的字典DictionaryComponent。类型定义单视图与多视图两种路由配置在 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值得注意的一个细节当使用多视图components时props选项也升级为按视图名分组的字典如{ default: {...}, a: {...} }而不是单一值。这正是命名视图能力向 props 传递的延伸——每个视图出口可以拥有自己独立的 props 配置。官方可运行示例仓库中的 examples/named-views/app.js 提供了上述用法的完整可运行版本。它不仅配置了/路由还配置了/other路由两条路由的视图组件顺序不同方便直观对比import Vue from vue import VueRouter from vue-router Vue.use(VueRouter) const Foo { template: divfoo/div } const Bar { template: divbar/div } const Baz { template: divbaz/div } const router new VueRouter({ mode: history, base: __dirname, routes: [ { path: /, // a single route can define multiple named components // which will be rendered into router-views with corresponding names. components: { default: Foo, a: Bar, b: Baz } }, { path: /other, components: { default: Baz, a: Bar, b: Foo } } ] }) new Vue({ router, template: div idapp h1Named Views/h1 ul lirouter-link to///router-link/li lirouter-link to/other/other/router-link/li /ul router-view classview one/router-view router-view classview two namea/router-view router-view classview three nameb/router-view /div }).$mount(#app)其入口页面 examples/named-views/index.html 挂载了#app容器。你可以按照仓库的常规示例运行方式examples目录配合 webpack 构建启动后在浏览器中切换/与/other两个链接观察三个视图区域内容的变化。e2e 测试验证仓库的端到端测试 test/e2e/specs/named-views.js 对命名视图行为做了完整断言是理解其预期行为的权威参考.assert.containsText(.view.one, foo) .assert.containsText(.view.two, bar) .assert.containsText(.view.three, baz) .click(li:nth-child(2) a) .assert.urlEquals(http://localhost:8080/named-views/other) .assert.containsText(.view.one, baz) .assert.containsText(.view.two, bar) .assert.containsText(.view.three, foo)测试验证了访问/时default出口渲染fooa出口渲染barb出口渲染baz点击链接跳转到/other后各出口内容按新配置切换default渲染baz等直接访问/other初始访问同样能正确渲染。这说明命名视图的渲染与当前匹配的路由记录强绑定路由切换会同步刷新所有命名出口的内容。三、嵌套命名视图构建复杂后台布局命名视图的能力并不止于顶层。命名视图可以与嵌套路由nested routes结合构建非常复杂的页面布局——这就是嵌套命名视图Nested Named Views。此时你同样需要为嵌套层级的router-view命名。考虑一个典型的设置面板Settings Panel示例它由两层视图构成/settings/emails /settings/profile ----------------------------------- ------------------------------ | UserSettings | | UserSettings | | ------------------------------ | | ------------------------- | | | Nav | UserEmailsSubscriptions | | ------------ | | Nav | UserProfile | | | | ------------------------- | | | -------------------- | | | | | | | | | UserProfilePreview | | | ------------------------------ | | ------------------------- | ----------------------------------- ------------------------------Nav只是一个普通组件导航栏UserSettings是外层视图组件UserEmailsSubscriptions、UserProfile、UserProfilePreview是内层嵌套的视图组件。注意这里我们暂时忽略 HTML/CSS 的细节只关注组件的组织方式。外层组件的模板多个命名出口UserSettings组件的template部分大致如下!-- UserSettings.vue -- div h1User Settings/h1 NavBar/ router-view/ router-view namehelper/ /div这里出现了两个嵌套出口一个无名default一个名为helper。它们分别负责渲染子路由配置中default与helper两个视图。路由配置components与children的组合配合上面的模板用下面的路由配置即可完成整个布局{ path: /settings, // You could also have named views at the top component: UserSettings, children: [{ path: emails, component: UserEmailsSubscriptions }, { path: profile, components: { default: UserProfile, helper: UserProfilePreview } }] }逐段解读/settings路由本身使用单数component: UserSettings渲染外层容器子路由emails只使用单数component此时内部两个出口中只有default被填充helper出口渲染为空子路由profile使用复数componentsdefault出口渲染UserProfilehelper出口渲染UserProfilePreview从而形成主内容预览面板的并排布局。源码视角嵌套时视图深度depth的确定为什么嵌套路由能精准地把内层组件渲染到内层出口这依赖router-view渲染时的视图深度计算。src/components/view.js 中通过向上遍历父组件链来累加深度let depth 0 let inactive false while (parent parent._routerRoot ! parent) { const vnodeData parent.$vnode ? parent.$vnode.data : {} if (vnodeData.routerView) { depth } ... parent parent.$parent } data.routerViewDepth depth每个router-view渲染时会把routerView: true标记到 vnode data 上。内层的router-view在向上遍历时会遇到外层的router-view于是深度depth递增最终用它索引route.matched[depth]——matched数组中越深的索引对应的正是嵌套层级越深的路由记录。因此内层出口渲染的是子路由记录components中对应名字的组件从而实现外层容器内层多出口的复杂布局。命名视图与 props 的联动当同一个路由需要为不同命名视图传递不同 props 时可以使用字典形式的props配置与components一一对应{ path: /settings/profile, components: { default: UserProfile, helper: UserProfilePreview }, props: { default: { editable: true }, helper: { compact: true } } }在 src/components/view.js 中视图组件会根据当前name读取对应的 props 配置const configProps matched.props matched.props[name]即matched.props是字典matched.props[name]取出当前视图名对应的 props 配置对象、函数或布尔值再填充进渲染数据。这也印证了 types/router.d.ts 中RouteConfigMultipleViews将props定义为Dictionaryboolean | Object | RoutePropsFunction的原因。四、使用要点与易错项总结结合文档与源码使用命名视图时有几个关键点需要牢记复数才是多视图同一路由需要渲染多个组件时必须用components带 s单数component会被内部转换为{ default: component }见 src/create-route-map.js 中route.components || { default: route.component }。默认名default不带name的router-view对应default键与components.default匹配见 src/components/view.js 的 props 默认值。嵌套需配层级使用嵌套命名视图时外层组件模板中的每个router-view都需要有对应名称子路由配置中再通过components为各名称提供组件。深度由router-view嵌套层级自动计算。props 与 components 成对出现多视图路由中props也应写成按视图名分组的字典各出口可独立配置。保持视图名一致模板中name属性值与路由配置中components的 key 必须完全一致如helper否则对应出口将渲染为空节点——这是源码中component matched matched.components[name]查找失败的常见原因。五、结语命名视图是 vue-router 在单出口嵌套之外提供的并行多出口渲染方案通过router-view name声明多个出口通过路由配置中的components与字典形式的props为同一路由绑定多个组件再与嵌套路由结合即可在 Vue 2 应用中搭建从简单的双栏布局到复杂的设置面板等各类页面结构。其底层机制清晰可循——视图深度计算、matched.components[name]的按名查找、components与component的归一化都可以在 src/components/view.js 与 src/create-route-map.js 中逐行验证官方示例 examples/named-views/app.js 与 e2e 测试 test/e2e/specs/named-views.js 则提供了可直接运行、可直接断言的行为参照。【免费下载链接】vue-router The official router for Vue 2项目地址: https://gitcode.com/gh_mirrors/vu/vue-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

vue-router 命名视图（Named Views）完全指南：多视图布局与嵌套命名视图实战

相关推荐

游戏UI动效伪造：付款码梗背后的视觉欺骗原理

@emotion/primitives-core 核心包解析：跨平台 CSS-in-JS 底层架构与版本演进全指南

React Bits 实战：用 Prop 驱动的顺序映射实现多品牌页面区块的 Display Order 变体

更多资讯

Moya 多部分上传（Multipart Upload）完全指南：MultipartFormData 与两种参数传递方案

VB.NET泛型编程：原理、实践与性能优化

RCF C++ RPC框架：面向工业场景的高性能通信底座

Flutter跨平台开发：MethodChannel原理与实践

MAX 提问烧 12 刀？TaoToken 这样改 Trae 的模型通道

Java 21 + Spring Boot 3 构建企业级 RAG 智能体工作流引擎

今日更新

OneUptime 自定义探针（Custom Probe）部署实战：私网监控、代理配置与断连排障全指南

大众TL52625前端框架材料要求详解：从性能测试到落地执行

TiXL 浮点运算算子库 Lib.numbers.float 完全指南：44 个算子的参数详解、源码原理与实战串联

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？