Vue3嵌套路由

什么是嵌套路由？

嵌套路由是Vue Router中的一个重要概念，它允许在路由组件内部嵌套其他路由组件，形成父子路由关系。这种设计特别适合构建具有多层布局结构的应用；

为什么需要嵌套路由？

一个典型的后台管理系统有这些需求：

外层有整理布局，比如头部、侧边栏；
内层有不同的功能页面,比如用户管理、订单管理、系统设置等；
每个功能页面内部可能还有子页面，比如用户列表、用户详情；

嵌套路由就是为了解决这种具有分层视图结构的要求；

实际案例

我们还是使用上次的方法来进行演示,给services.vue这个组件给改造以下

js 复制代码

<template>
  <div class="services-container">
    <h2 class="content-title">服务项目</h2>
    
    <div class="services-layout">
      <!-- 左侧服务列表 -->
      <div class="services-sidebar">
        <button 
          v-for="service in services" 
          :key="service.id"
          :class="['service-btn', { active: activeService === service.id }]"
          @click="selectService(service.id)"
        >
          {{ service.name }}
        </button>
      </div>
      
      <!-- 右侧嵌套内容区域 -->
      <div class="services-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeService = ref('web-design')

const services = ref([
  { id: 'web-design', name: '网站设计与开发' },
  { id: 'mobile-app', name: '移动应用开发' },
  { id: 'ecommerce', name: '电子商务解决方案' },
  { id: 'api', name: 'API 开发与集成' },
  { id: 'consulting', name: '技术咨询与培训' }
])

const selectService = (serviceId: string) => {
  activeService.value = serviceId
  router.push(`/services/${serviceId}`)
}

onMounted(() => {
  // 初始化时导航到默认服务
  if (router.currentRoute.value.path === '/services') {
    router.push('/services/web-design')
  }
})
</script>

<style scoped>
.services-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.content-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.services-layout {
  display: flex;
  gap: 20px;
  min-height: 400px;
}

.services-sidebar {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-btn {
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.service-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.service-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.services-content {
  flex: 1;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 20px;
  background: white;
}
</style>

之后我们创建一个组件，其他的不创建了，演示一下就行

js 复制代码

<template>
    <div class="service-detail">
        <h3>网站设计与开发</h3>
        <p>我们提供全方位的网站设计与开发服务，从概念设计到最终部署，确保您的网站在各种设备上都能完美展示。</p>

        <div class="service-features">
            <h4>服务特点：</h4>
            <ul>
                <li>响应式设计，适配各种屏幕尺寸</li>
                <li>现代化UI/UX设计</li>
                <li>SEO优化，提高搜索引擎排名</li>
                <li>快速加载速度优化</li>
                <li>内容管理系统集成</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
// 组件逻辑
</script>

<style scoped>
.service-detail h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.service-detail p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.service-features {
    margin-top: 20px;
}

.service-features h4 {
    margin-bottom: 10px;
    color: #495057;
}

.service-features ul {
    padding-left: 20px;
}

.service-features li {
    margin-bottom: 8px;
}
</style>

然后就需要我们在路由上进行定义一下

js 复制代码

{
        path: '/services',
        component: Services,
        name: 'services',
        children: [
            {
                path: 'web-design',
                component: WebDesign
            }
        ]
    }

注：

嵌套路由配置需要在父路由定义children数组，切记子路由不需要加/；
路由视图需要在父组件中使用展示嵌套内容；
useRouter是进行路由跳转的，后面会详细讲到；