Vue基础教程（168）Vue Router之命名视图：停车位不够用？Vue Router的“命名视图”让你轻松停靠多个组件！

还记得第一次用Vue Router时的窘迫吗？就像拿到新车却只有一个停车位——<router-view>默认只能渲染一个组件，想在同一个页面展示侧边栏、主内容区和广告栏？抱歉，传统路由说：“不行，我得二选一！”

但现实中的网页，早就是“豪华复式结构”了。比如管理后台，通常长这样：

[ 侧边栏 ] [ 主内容区 ] [ 工具栏 ]

或者外卖网站：

[ 导航栏 ] 
[ 商家信息 ] [ 菜品列表 ] [ 购物车 ]

如果每个区域都是独立组件，如何让它们和谐共处？Vue Router的命名视图，就是你的终极答案！它像给页面划出了多个“专属停车位”，每个命名视图都是一个精准的组件停靠点。

一、为什么需要命名视图？从“路边乱停车”到“规范停车位”

想象一下早期Web开发：jQuery时代，我们手动$('#sidebar').html(componentA)，像在路边随便找空位停车——能停，但容易堵路，还难以维护。

后来Vue的单个<router-view>出现了，像是划了个固定车位。但多组件怎么办？开发者们各显神通：

• 方案A：全写在一个巨型组件里——结果3000行代码，改行样式像大海捞针
• 方案B：用v-if切换——像在车位上频繁换车，累且生硬

直到命名视图出现，才真正实现了“一个页面，多个专用车位”的理想状态。

二、基础入门：给你的视图起个名，就像给车位编号

核心概念：给<router-view>加上name属性，路由配置中指定每个名字对应的组件。

场景：做一个简单博客，同时显示文章列表、热门文章、广告横幅。

步骤1：定义带名字的视图
在App.vue（或布局组件）中：

<template>
  <div class="blog-layout">
    <!-- 主内容区 - 默认名字就是default -->
    <router-view class="main"></router-view>
    
    <!-- 侧边栏热门文章 - 命名视图 -->
    <router-view name="sidebar" class="sidebar"></router-view>
    
    <!-- 底部广告 - 另一个命名视图 -->
    <router-view name="banner" class="banner"></router-view>
  </div>
</template>