Vue Router：多router-view场景下仅更新指定视图内容

嘿，我明白你的问题了——现在点击C2的路由链接时，右侧的area_1内容被清空，这是因为你可能只用了一个默认的<router-view>，切换路由时整个视图都被替换了。要实现点击C2只更新area_2、保留area_1的内容，Vue Router的命名视图就是完美的解决方案，下面一步步来：

1. 修改模板结构，给两个区域分配命名视图 #

把右侧的两个内容区域分别用带name属性的<router-view>标记，让它们对应不同的路由视图插槽：

<template>
  <div class="app-layout">
    <!-- 左侧菜单 -->
    <aside class="sidebar">
      <router-link to="/c0">C0</router-link>
      <router-link to="/c1">C1</router-link>
      <router-link to="/c2">C2</router-link>
    </aside>
    <!-- 右侧双内容区 -->
    <main class="content-wrapper">
      <div class="area_1">
        <!-- 命名视图：对应area1的内容 -->
        <router-view name="area1"></router-view>
      </div>
      <div class="area_2">
        <!-- 命名视图：对应area2的内容 -->
        <router-view name="area2"></router-view>
      </div>
    </main>
  </div>
</template>

2. 配置路由，指定每个路由对应渲染的命名视图 #

在路由配置里，用components（复数形式）替代component，给每个路由指定要更新的目标视图：

import { createRouter, createWebHashHistory } from 'vue-router'
// 导入你的组件
import C0 from '@/components/C0.vue'
import C1 from '@/components/C1.vue'
import C2 from '@/components/C2.vue'

const routes = [
  // 访问C0时，仅更新area1视图
  {
    path: '/c0',
    components: {
      area1: C0
    }
  },
  // 访问C1时，仅更新area1视图
  {
    path: '/c1',
    components: {
      area1: C1
    }
  },
  // 访问C2时，仅更新area2视图，area1保持当前内容
  {
    path: '/c2',
    components: {
      area2: C2
    }
  },
  // 默认路由：加载C0到area1，area2留空或设默认组件
  {
    path: '/',
    components: {
      area1: C0
    }
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

为什么这样能解决问题？ #

原来的方案中，所有路由都渲染到同一个默认<router-view>，切换路由时整个视图会被新组件替换，导致area_1的内容丢失。而命名视图相当于给每个内容区域分配了独立的"渲染插槽"，路由切换时只会更新你指定的插槽，另一个插槽的组件会保持挂载状态，自然不会被清空。

额外注意事项 #

• 一定要用components（复数）而不是component，否则无法指定多个命名视图；
• 如果需要area_2默认显示某个组件，可以在根路由的components里加上area2: DefaultArea2Component；
• 如果你的路由是嵌套结构，也可以把命名视图和嵌套路由结合使用，核心逻辑是一致的——让不同内容区域对应独立的视图插槽。

内容的提问来源于stack exchange，提问作者Simon