Vue.js中如何使用嵌套在组件内的多个router-view？

嘿，这个问题我之前做后台管理系统的时候踩过坑！核心原因是你没正确配置嵌套路由，导致Vue Router把侧边栏对应的内容路由当成了顶级路由，直接替换了外层的<router-view/>，所以包含侧边栏的父组件就被换掉，自然看不到侧边栏了。下面给你一步步拆解解决方法：

1. 先理清路由层级结构 #

你需要把带侧边栏的页面设为父路由，侧边栏旁的内容作为它的子路由。举个清晰的层级示例：

• 顶级路由：/dashboard → 对应包含<sidebar/>和内层<router-view/>的布局组件
• 子路由：/dashboard/profile、/dashboard/settings → 对应侧边栏旁要切换的内容组件

2. 配置嵌套路由 #

在你的路由配置文件里，用children字段来定义子路由，示例代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import DashboardLayout from '@/views/DashboardLayout.vue'
import UserProfile from '@/views/UserProfile.vue'
import AccountSettings from '@/views/AccountSettings.vue'
// 引入其他顶级路由组件，比如首页、关于页等

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 其他顶级路由配置
    {
      path: '/dashboard',
      component: DashboardLayout, // 这个组件就是带侧边栏的布局容器
      children: [
        // 子路由：对应侧边栏的各个导航链接
        { path: 'profile', component: UserProfile },
        { path: 'settings', component: AccountSettings },
        // 可选配置：进入/dashboard时默认跳转第一个子路由
        { path: '', redirect: 'profile' }
      ]
    }
  ]
})

export default router

3. 编写带侧边栏的布局组件 #

你的DashboardLayout.vue需要同时包含侧边栏和专门渲染子内容的内层<router-view/>，示例：

<template>
  <div class="dashboard-wrapper">
    <sidebar/> <!-- 你的侧边栏组件，里面包含<router-link>导航 -->
    <div class="content-area">
      <transition name="slide-fade" mode="out-in">
        <router-view/> <!-- 这里专门渲染子路由对应的内容组件 -->
      </transition>
    </div>
  </div>
</template>

4. 侧边栏的要指向正确路径 #

侧边栏里的导航链接，要指向子路由的路径，两种写法都可以：

<!-- 绝对路径写法，清晰明确 -->
<router-link to="/dashboard/profile">个人资料</router-link>
<router-link to="/dashboard/settings">账户设置</router-link>

<!-- 相对路径写法（在DashboardLayout组件内，会自动拼接父路由path） -->
<router-link to="profile">个人资料</router-link>
<router-link to="settings">账户设置</router-link>

为什么之前会出问题？ #

之前你可能把profile、settings这类路由配置成了顶级路由（比如path: '/profile'），当点击链接时，Vue Router会匹配这个顶级路由，直接替换最外层的<router-view/>（也就是顶部导航下面的那个），导致原来的DashboardLayout组件（包含侧边栏）被替换掉，只剩下UserProfile组件，所以侧边栏就消失了。

按照上面的嵌套路由配置，外层<router-view/>负责渲染顶级路由（比如/dashboard对应的布局），内层<router-view/>负责渲染子路由的内容，这样点击侧边栏链接时，只会替换内层的内容，侧边栏会一直保留，同时URL也会同步更新成/dashboard/profile这类符合层级的路径。

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