嵌套路由

┌────────────────────────────────────────────────────────────────┐
│                       嵌套路由结构示意                          │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  URL: /user/123/profile                                        │
│                                                                │
│  ┌─────────────────────────────────────────────────────────┐  │
│  │                    App.vue (根视图)                      │  │
│  │  ┌───────────────────────────────────────────────────┐  │  │
│  │  │              User.vue (父路由组件)                 │  │  │
│  │  │                                                   │  │  │
│  │  │  ┌─────────────────────────────────────────────┐  │  │  │
│  │  │  │        UserProfile.vue (子路由组件)          │  │  │  │
│  │  │  │                                             │  │  │  │
│  │  │  │              <router-view />                │  │  │  │
│  │  │  └─────────────────────────────────────────────┘  │  │  │
│  │  │                                                   │  │  │
│  │  └───────────────────────────────────────────────────┘  │  │
│  └─────────────────────────────────────────────────────────┘  │
│                                                                │
└────────────────────────────────────────────────────────────────┘

const routes = [
  {
    path: '/user/:id',
    component: User,  // 父组件
    children: [
      {
        path: '',           // 默认子路由（空路径）
        name: 'UserHome',
        component: UserHome
      },
      {
        path: 'profile',    // /user/:id/profile
        name: 'UserProfile',
        component: UserProfile
      },
      {
        path: 'posts',      // /user/:id/posts
        name: 'UserPosts',
        component: UserPosts
      }
    ]
  }
]

<!-- User.vue -->
<template>
  <div class="user-container">
    <h2>用户信息</h2>
    <p>用户 ID: {{ userId }}</p>
    
    <!-- 子路由导航 -->
    <nav class="user-nav">
      <router-link :to="{ name: 'UserHome', params: { id: userId } }">
        概览
      </router-link>
      <router-link :to="{ name: 'UserProfile', params: { id: userId } }">
        资料
      </router-link>
      <router-link :to="{ name: 'UserPosts', params: { id: userId } }">
        文章
      </router-link>
    </nav>
    
    <!-- 子路由渲染位置 -->
    <router-view />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const userId = computed(() => route.params.id)
</script>

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // 空路径：匹配父路径 /user/:id
      { path: '', component: UserHome },
      
      // 相对路径：拼接父路径 /user/:id/profile
      { path: 'profile', component: UserProfile },
      
      // 绝对路径：独立路径 /settings（不拼接）
      { path: '/settings', component: Settings },
      
      // 动态参数：/user/:id/posts/:postId
      { path: 'posts/:postId', component: UserPost }
    ]
  }
]

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      {
        path: 'users',
        component: AdminUsers,
        children: [
          {
            path: ':userId',
            component: AdminUserDetail,
            children: [
              {
                path: 'edit',
                component: AdminUserEdit
              }
            ]
          }
        ]
      }
    ]
  }
]

// URL 对应关系：
// /admin                    → AdminLayout
// /admin/users              → AdminLayout > AdminUsers
// /admin/users/123          → AdminLayout > AdminUsers > AdminUserDetail
// /admin/users/123/edit     → AdminLayout > AdminUsers > AdminUserDetail > AdminUserEdit

AdminLayout.vue
├── <router-view>
│   └── AdminUsers.vue
│       └── <router-view>
│           └── AdminUserDetail.vue
│               └── <router-view>
│                   └── AdminUserEdit.vue

<!-- AdminLayout.vue -->
<template>
  <div class="admin-layout">
    <aside class="sidebar">
      <!-- 侧边栏导航 -->
    </aside>
    <main class="content">
      <router-view />
    </main>
  </div>
</template>

<!-- AdminUsers.vue -->
<template>
  <div class="admin-users">
    <div class="user-list">
      <!-- 用户列表 -->
    </div>
    <div class="user-detail">
      <router-view />
    </div>
  </div>
</template>

<!-- AdminUserDetail.vue -->
<template>
  <div class="user-detail">
    <h3>用户详情</h3>
    <router-view />
  </div>
</template>

const routes = [
  {
    path: '/settings',
    component: Settings,
    children: [
      // 空路径作为默认视图
      {
        path: '',
        name: 'Settings',
        component: SettingsDefault
      },
      {
        path: 'profile',
        name: 'SettingsProfile',
        component: SettingsProfile
      },
      {
        path: 'account',
        name: 'SettingsAccount',
        component: SettingsAccount
      }
    ]
  }
]

const routes = [
  {
    path: '/settings',
    component: Settings,
    redirect: '/settings/profile',  // 默认重定向
    children: [
      {
        path: 'profile',
        name: 'SettingsProfile',
        component: SettingsProfile
      },
      {
        path: 'account',
        name: 'SettingsAccount',
        component: SettingsAccount
      }
    ]
  }
]

const routes = [
  {
    path: '/settings',
    component: SettingsLayout,
    children: [
      {
        path: 'emails',
        components: {
          default: EmailSettings,    // 默认视图
          sidebar: EmailSidebar,     // 侧边栏视图
          header: SettingsHeader     // 头部视图
        }
      },
      {
        path: 'notifications',
        components: {
          default: NotificationSettings,
          sidebar: NotificationSidebar,
          header: SettingsHeader
        }
      }
    ]
  }
]

<!-- SettingsLayout.vue -->
<template>
  <div class="settings-layout">
    <!-- 头部视图 -->
    <header class="settings-header">
      <router-view name="header" />
    </header>
    
    <div class="settings-content">
      <!-- 侧边栏视图 -->
      <aside class="settings-sidebar">
        <router-view name="sidebar" />
      </aside>
      
      <!-- 默认视图 -->
      <main class="settings-main">
        <router-view />
      </main>
    </div>
  </div>
</template>

// 经典管理后台布局
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        components: {
          default: Dashboard,
          sidebar: DashboardSidebar,
          header: MainHeader
        }
      },
      {
        path: 'users',
        components: {
          default: Users,
          sidebar: UsersSidebar,
          header: UsersHeader
        }
      }
    ]
  }
]

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 当前路由参数
const currentParams = computed(() => route.params)

// 父级路由参数
const parentParams = computed(() => {
  const parent = route.matched[route.matched.length - 2]
  return parent?.params || {}
})

// 所有匹配的路由
console.log(route.matched)
</script>

<template>
  <nav class="breadcrumb">
    <span v-for="(item, index) in breadcrumbs" :key="item.path">
      <router-link v-if="index < breadcrumbs.length - 1" :to="item.path">
        {{ item.meta.title }}
      </router-link>
      <span v-else>{{ item.meta.title }}</span>
      <span v-if="index < breadcrumbs.length - 1"> / </span>
    </span>
  </nav>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => {
  return route.matched
    .filter(r => r.meta?.title)
    .map(r => ({
      path: r.path,
      meta: r.meta
    }))
})
</script>

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// 路由更新时（参数变化）
onBeforeRouteUpdate((to, from) => {
  if (to.params.id !== from.params.id) {
    // 重新加载数据
    loadData(to.params.id)
  }
  return true
})

// 离开路由时
onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return confirm('有未保存的更改，确定离开吗？')
  }
  return true
})
</script>

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    beforeEnter: (to, from) => {
      if (!isAdmin()) return '/403'
    },
    children: [
      {
        path: 'users',
        component: AdminUsers,
        beforeEnter: (to, from) => {
          if (!hasPermission('user:read')) return '/403'
        }
      }
    ]
  }
]

// router/modules/admin.js
export default {
  path: '/admin',
  component: () => import('@/layouts/AdminLayout.vue'),
  meta: { requiresAuth: true },
  children: [
    {
      path: '',
      redirect: 'dashboard'
    },
    {
      path: 'dashboard',
      name: 'AdminDashboard',
      component: () => import('@/views/admin/Dashboard.vue'),
      meta: { title: '仪表盘', icon: 'dashboard' }
    },
    {
      path: 'users',
      name: 'AdminUsers',
      component: () => import('@/views/admin/users/Index.vue'),
      meta: { title: '用户管理', icon: 'users' },
      children: [
        {
          path: ':id',
          name: 'AdminUserDetail',
          component: () => import('@/views/admin/users/Detail.vue'),
          meta: { title: '用户详情', hidden: true }
        }
      ]
    },
    {
      path: 'settings',
      name: 'AdminSettings',
      component: () => import('@/views/admin/Settings.vue'),
      meta: { title: '系统设置', icon: 'settings' }
    }
  ]
}

<!-- AdminLayout.vue -->
<template>
  <el-container class="admin-container">
    <!-- 侧边栏 -->
    <el-aside width="220px">
      <Sidebar :menu="menuItems" />
    </el-aside>
    
    <el-container>
      <!-- 头部 -->
      <el-header>
        <Header />
      </el-header>
      
      <!-- 面包屑 -->
      <Breadcrumb />
      
      <!-- 主内容区 -->
      <el-main>
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 动态生成菜单
const menuItems = computed(() => {
  const adminRoute = route.matched.find(r => r.path === '/admin')
  return adminRoute?.children
    ?.filter(child => !child.meta?.hidden)
    ?.map(child => ({
      path: `/admin/${child.path}`,
      title: child.meta?.title,
      icon: child.meta?.icon
    })) || []
})
</script>

// 不推荐：过深的嵌套
{
  path: '/a',
  children: [{
    path: 'b',
    children: [{
      path: 'c',
      children: [{
        path: 'd',
        component: D  // 4层嵌套，维护困难
      }]
    }]
  }]
}

// 推荐：扁平化路由
{
  path: '/a/b/c/d',
  component: D  // 直接定义完整路径
}

const routes = [
  {
    path: '/',
    components: {
      default: MainContent,
      header: AppHeader,
      footer: AppFooter,
      sidebar: AppSidebar
    }
  }
]

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    meta: { 
      requiresAuth: true,
      layout: 'admin'
    },
    children: [
      {
        path: 'users',
        component: AdminUsers,
        meta: { 
          title: '用户管理',
          breadcrumb: [
            { title: '首页', path: '/' },
            { title: '管理后台', path: '/admin' },
            { title: '用户管理' }
          ]
        }
      }
    ]
  }
]

const routes = [
  {
    path: '/admin',
    component: () => import(/* webpackChunkName: "admin" */ '@/layouts/AdminLayout.vue'),
    children: [
      {
        path: 'dashboard',
        component: () => import(/* webpackChunkName: "admin" */ '@/views/admin/Dashboard.vue')
      },
      {
        path: 'users',
        component: () => import(/* webpackChunkName: "admin-users" */ '@/views/admin/Users.vue')
      }
    ]
  }
]

<!-- 错误：缺少 router-view -->
<template>
  <div class="parent">
    <h2>父组件内容</h2>
    <!-- 没有子路由出口 -->
  </div>
</template>

<!-- 正确 -->
<template>
  <div class="parent">
    <h2>父组件内容</h2>
    <router-view />  <!-- 子路由渲染位置 -->
  </div>
</template>

// 错误：没有默认子路由
{
  path: '/settings',
  component: Settings,
  children: [
    { path: 'profile', component: Profile }
    // 访问 /settings 时没有匹配的路由
  ]
}

// 正确方式1：添加空路径子路由
{
  path: '/settings',
  component: Settings,
  children: [
    { path: '', component: SettingsDefault },
    { path: 'profile', component: Profile }
  ]
}

// 正确方式2：使用重定向
{
  path: '/settings',
  component: Settings,
  redirect: '/settings/profile',
  children: [
    { path: 'profile', component: Profile }
  ]
}

<template>
  <!-- 使用 v-slot 判断子路由激活 -->
  <router-link 
    to="/admin/users" 
    v-slot="{ isActive, isExactActive }"
  >
    <span :class="{ active: isActive, exact: isExactActive }">
      用户管理
    </span>
  </router-link>
</template>

<style>
/* 当前路由或子路由激活时应用样式 */
.active {
  color: #42b983;
}

/* 精确匹配时应用样式 */
.exact {
  font-weight: bold;
}
</style>

┌────────────────────────────────────────────────────────────────┐
│                    命名路由 vs 命名视图                         │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  命名路由 (name)                    命名视图 (components)       │
│  ┌─────────────────────┐          ┌─────────────────────┐     │
│  │ name: 'UserDetail'  │          │ components: {       │     │
│  │ path: '/user/:id'   │          │   default: Main,    │     │
│  │                     │          │   sidebar: Sidebar, │     │
│  │ 用名称标识路由        │          │   header: Header    │     │
│  │ 便于解耦 URL 变化    │          │ }                   │     │
│  └─────────────────────┘          └─────────────────────┘     │
│                                                                │
│  优势:                              优势:                       │
│  - URL 变更无需修改代码            - 多区域同时渲染             │
│  - 支持类型推断                    - 布局灵活可控               │
│  - 语义化标识                      - 组件解耦                   │
│                                                                │
└────────────────────────────────────────────────────────────────┘

const routes = [
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    meta: { title: '用户详情' }
  },
  {
    path: '/user/:id/profile',
    name: 'UserProfile',
    component: () => import('@/views/UserProfile.vue'),
    meta: { title: '用户资料' }
  },
  {
    path: '/user/:id/posts',
    name: 'UserPosts',
    component: () => import('@/views/UserPosts.vue'),
    meta: { title: '用户文章' }
  }
]

<template>
  <!-- 基本用法 -->
  <router-link :to="{ name: 'UserDetail', params: { id: 1 } }">
    用户详情
  </router-link>
  
  <!-- 带查询参数 -->
  <router-link :to="{ name: 'UserPosts', params: { id: 1 }, query: { page: 1 } }">
    用户文章
  </router-link>
  
  <!-- 带 hash -->
  <router-link :to="{ name: 'UserProfile', params: { id: 1 }, hash: '#avatar' }">
    用户资料
  </router-link>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function goToUser(id) {
  router.push({ name: 'UserDetail', params: { id } })
}

function goToUserPosts(id, page = 1) {
  router.push({ 
    name: 'UserPosts', 
    params: { id },
    query: { page }
  })
}
</script>

// 不使用命名路由：URL 变更需要修改所有引用
router.push('/user/1/profile')

// 使用命名路由：URL 变更只需修改路由配置
router.push({ name: 'UserProfile', params: { id: 1 } })

// 路由配置修改后，所有引用自动生效
const routes = [
  // URL 从 /user/:id/profile 改为 /u/:id/info
  { 
    path: '/u/:id/info',  // 只需修改这里
    name: 'UserProfile',   // name 保持不变
    component: UserProfile 
  }
]

const routes = [
  // 推荐：语义化命名
  { path: '/users', name: 'UserList', component: UserList },
  { path: '/users/:id', name: 'UserDetail', component: UserDetail },
  { path: '/users/:id/edit', name: 'UserEdit', component: UserEdit },
  
  // 嵌套路由命名
  {
    path: '/settings',
    name: 'Settings',
    component: Settings,
    children: [
      { path: '', name: 'SettingsProfile', component: SettingsProfile },
      { path: 'account', name: 'SettingsAccount', component: SettingsAccount },
      { path: 'security', name: 'SettingsSecurity', component: SettingsSecurity }
    ]
  }
]

const routes = [
  {
    path: '/settings',
    components: {  // 注意是 components（复数）
      default: SettingsMain,      // 默认视图
      sidebar: SettingsSidebar,   // 侧边栏视图
      header: SettingsHeader      // 头部视图
    }
  },
  {
    path: '/dashboard',
    components: {
      default: Dashboard,
      sidebar: DashboardSidebar,
      header: DashboardHeader,
      footer: DashboardFooter
    }
  }
]

<!-- App.vue 或布局组件 -->
<template>
  <div class="app-layout">
    <!-- 头部视图 -->
    <header class="app-header">
      <router-view name="header" />
    </header>
    
    <div class="app-body">
      <!-- 侧边栏视图 -->
      <aside class="app-sidebar">
        <router-view name="sidebar" />
      </aside>
      
      <!-- 默认视图（无 name 或 name="default"） -->
      <main class="app-main">
        <router-view />
      </main>
    </div>
    
    <!-- 底部视图 -->
    <footer class="app-footer">
      <router-view name="footer" />
    </footer>
  </div>
</template>

┌────────────────────────────────────────────────────────────────┐
│                        页面布局                                 │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │                    <router-view name="header" />          │ │
│  │                        Header 区域                        │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
│  ┌─────────────┐  ┌──────────────────────────────────────┐   │
│  │             │  │                                       │   │
│  │  <router-   │  │          <router-view />              │   │
│  │  view       │  │           (default)                   │   │
│  │  name=      │  │                                       │   │
│  │  "sidebar"  │  │           主内容区域                   │   │
│  │             │  │                                       │   │
│  │  Sidebar    │  │                                       │   │
│  │  区域       │  │                                       │   │
│  │             │  │                                       │   │
│  └─────────────┘  └──────────────────────────────────────┘   │
│                                                                │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │                    <router-view name="footer" />          │ │
│  │                        Footer 区域                        │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
└────────────────────────────────────────────────────────────────┘

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      {
        path: 'dashboard',
        components: {
          default: AdminDashboard,
          sidebar: AdminSidebar,
          header: AdminHeader
        }
      },
      {
        path: 'users',
        components: {
          default: AdminUsers,
          sidebar: UsersSidebar,
          header: UsersHeader
        }
      }
    ]
  }
]

<!-- AdminLayout.vue -->
<template>
  <div class="admin-layout">
    <header>
      <router-view name="header" />
    </header>
    
    <div class="admin-body">
      <aside>
        <router-view name="sidebar" />
      </aside>
      
      <main>
        <router-view />  <!-- 子路由的默认视图 -->
      </main>
    </div>
  </div>
</template>

// router/index.js
const routes = [
  {
    path: '/',
    component: DefaultLayout,
    children: [
      {
        path: '',
        components: {
          default: Home,
          sidebar: HomeSidebar,
          header: MainHeader
        }
      }
    ]
  },
  {
    path: '/admin',
    component: AdminLayout,
    meta: { requiresAuth: true },
    children: [
      {
        path: '',
        redirect: 'dashboard'
      },
      {
        path: 'dashboard',
        name: 'AdminDashboard',
        components: {
          default: AdminDashboard,
          sidebar: AdminSidebar,
          header: AdminHeader
        },
        meta: { title: '仪表盘' }
      },
      {
        path: 'users',
        name: 'AdminUsers',
        components: {
          default: AdminUsers,
          sidebar: UsersSidebar,
          header: AdminHeader
        },
        meta: { title: '用户管理' }
      },
      {
        path: 'settings',
        name: 'AdminSettings',
        components: {
          default: AdminSettings,
          sidebar: SettingsSidebar,
          header: AdminHeader
        },
        meta: { title: '系统设置' }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

<!-- layouts/AdminLayout.vue -->
<template>
  <el-container class="admin-layout">
    <!-- 头部 -->
    <el-header class="admin-header">
      <router-view name="header" />
    </el-header>
    
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="220px" class="admin-sidebar">
        <router-view name="sidebar" />
      </el-aside>
      
      <!-- 主内容 -->
      <el-main class="admin-main">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <keep-alive :include="cachedViews">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 缓存视图配置
const cachedViews = computed(() => {
  return route.meta.keepAlive ? [route.name] : []
})
</script>

<!-- components/AdminSidebar.vue -->
<template>
  <el-menu
    :default-active="activeMenu"
    router
  >
    <el-menu-item 
      v-for="item in menuItems" 
      :key="item.path"
      :index="item.path"
    >
      <el-icon><component :is="item.icon" /></el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const menuItems = [
  { path: '/admin/dashboard', title: '仪表盘', icon: 'Odometer' },
  { path: '/admin/users', title: '用户管理', icon: 'User' },
  { path: '/admin/settings', title: '系统设置', icon: 'Setting' }
]

const activeMenu = computed(() => route.path)
</script>

const routes = [
  {
    path: '/user/:id',
    components: {
      default: UserDetail,
      sidebar: UserSidebar,
      header: UserHeader
    },
    props: {
      default: true,              // params -> props
      sidebar: { showAvatar: true },  // 静态 props
      header: route => ({         // 动态 props
        userId: route.params.id,
        title: route.meta.title
      })
    }
  }
]

<!-- UserSidebar.vue -->
<script setup>
defineProps({
  showAvatar: {
    type: Boolean,
    default: false
  }
})
</script>

<!-- UserHeader.vue -->
<script setup>
defineProps({
  userId: {
    type: String,
    required: true
  },
  title: {
    type: String,
    default: ''
  }
})
</script>

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/DefaultLayout.vue'),
    children: [
      { path: '', name: 'Home', component: Home }
    ]
  },
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'),
    meta: { layout: 'admin' },
    children: [
      { path: 'dashboard', name: 'AdminDashboard', component: Dashboard }
    ]
  },
  {
    path: '/auth',
    component: () => import('@/layouts/AuthLayout.vue'),
    meta: { layout: 'auth' },
    children: [
      { path: 'login', name: 'Login', component: Login },
      { path: 'register', name: 'Register', component: Register }
    ]
  }
]

<!-- App.vue -->
<template>
  <component :is="layoutComponent">
    <router-view />
  </component>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import AdminLayout from '@/layouts/AdminLayout.vue'
import AuthLayout from '@/layouts/AuthLayout.vue'

const route = useRoute()

const layoutComponent = computed(() => {
  const layout = route.meta.layout
  switch (layout) {
    case 'admin': return AdminLayout
    case 'auth': return AuthLayout
    default: return DefaultLayout
  }
})
</script>

<!-- 错误：name 值不正确 -->
<router-view name="Sidebar" />  <!-- 大写 -->

<!-- 正确：与路由配置一致 -->
<router-view name="sidebar" />  <!-- 小写 -->

<!-- 注意：没有 name 或 name="default" 都是默认视图 -->
<router-view />
<router-view name="default" />

<!-- 两者等效，但不要同时使用 -->

// 错误：params 未传递
router.push({ name: 'UserDetail' })  // 缺少 id 参数

// 正确
router.push({ name: 'UserDetail', params: { id: 1 } })

// 共享侧边栏配置
const sharedSidebar = () => import('@/components/SharedSidebar.vue')
const sharedHeader = () => import('@/components/SharedHeader.vue')

const routes = [
  {
    path: '/settings',
    components: {
      default: Settings,
      sidebar: sharedSidebar,
      header: sharedHeader
    }
  },
  {
    path: '/profile',
    components: {
      default: Profile,
      sidebar: sharedSidebar,
      header: sharedHeader
    }
  }
]

// types/router.ts
export type RouteName = 
  | 'Home'
  | 'UserDetail'
  | 'UserEdit'
  | 'AdminDashboard'

// 扩展 vue-router 类型
declare module 'vue-router' {
  interface RouteRecordName {
    RouteName
  }
}

// router/modules/admin.js
export default {
  path: '/admin',
  component: () => import('@/layouts/AdminLayout.vue'),
  children: [
    {
      path: 'dashboard',
      name: 'AdminDashboard',
      components: {
        default: () => import('@/views/admin/Dashboard.vue'),
        sidebar: () => import('@/components/admin/Sidebar.vue'),
        header: () => import('@/components/admin/Header.vue')
      }
    }
  ]
}

// router/index.js
import adminRoutes from './modules/admin'

const routes = [
  ...adminRoutes
]

// Vue Router 4 路由匹配算法简化实现
interface RouteRecordNormalized {
  path: string
  name?: string
  components: Record<string, Component>
  children: RouteRecordNormalized[]
  beforeEnter?: NavigationGuard
  props: Record<string, boolean | object | ((route: RouteLocation) => object)>
  instances: Record<string, ComponentPublicInstance>
  leaveGuards: Set<NavigationGuard>
  updateGuards: Set<NavigationGuard>
}

class RouteMatcher {
  private pathMap: Map<string, RouteRecordNormalized> = new Map()
  private nameMap: Map<string, RouteRecordNormalized> = new Map()
  private root: RouteRecordNormalized = {
    path: '',
    children: [],
    components: {},
    props: {},
    instances: {},
    leaveGuards: new Set(),
    updateGuards: new Set()
  }
  
  /**
   * 核心匹配方法：递归遍历路由树，收集所有匹配的路由记录
   * 返回的 matched 数组按嵌套层级排列：[父路由, 子路由, 孙子路由...]
   */
  resolve(location: string): {
    matched: RouteRecordNormalized[]
    params: Record<string, string>
  } {
    const segments = location.split('/').filter(Boolean)
    const matched: RouteRecordNormalized[] = []
    const params: Record<string, string> = {}
    
    let current = this.root
    let segmentIndex = 0
    
    while (segmentIndex < segments.length) {
      let found = false
      
      // 在当前层级的所有子路由中查找匹配
      for (const child of current.children) {
        // 跳过空路径的子路由（默认子路由，不消耗路径段）
        if (child.path === '') continue
        
        const result = this.matchSegment(child.path, segments[segmentIndex])
        if (result !== null) {
          Object.assign(params, result.params)
          matched.push(child)
          current = child
          segmentIndex++
          found = true
          break
        }
      }
      
      if (!found) {
        // 检查当前层级是否有空路径子路由（默认子路由）
        const defaultChild = current.children.find(c => c.path === '')
        if (defaultChild) {
          matched.push(defaultChild)
          current = defaultChild
          // 默认子路由不消耗路径段，继续尝试匹配
          continue
        }
        break
      }
    }
    
    // 如果路径段完全匹配完，检查是否有默认子路由需要加入
    if (segmentIndex >= segments.length) {
      this.collectDefaultChildren(current, matched)
    }
    
    return { matched, params }
  }
  
  /**
   * 递归收集所有默认子路由
   */
  private collectDefaultChildren(
    record: RouteRecordNormalized,
    matched: RouteRecordNormalized[]
  ): void {
    const defaultChild = record.children.find(c => c.path === '')
    if (defaultChild) {
      matched.push(defaultChild)
      this.collectDefaultChildren(defaultChild, matched)
    }
  }
  
  /**
   * 单段路径匹配：支持静态路径和动态参数
   */
  private matchSegment(
    pattern: string,
    segment: string
  ): { params: Record<string, string> } | null {
    // 静态路径匹配
    if (pattern === segment) {
      return { params: {} }
    }
    
    // 动态参数匹配 :paramName
    const paramMatch = pattern.match(/^:([^/]+)$/)
    if (paramMatch) {
      return { params: { [paramMatch[1]]: segment } }
    }
    
    // 带正则的动态参数匹配 :paramName(\\d+)
    const regexParamMatch = pattern.match(/^:([^(]+)\(([^)]+)\)$/)
    if (regexParamMatch) {
      const [, paramName, regexStr] = regexParamMatch
      const regex = new RegExp(`^${regexStr}$`)
      if (regex.test(segment)) {
        return { params: { [paramName]: segment } }
      }
    }
    
    return null
  }
}

URL: /admin/users/123/edit

路由配置:
/admin (AdminLayout)
  └── /users (AdminUsers)
       └── /:userId (AdminUserDetail)
            └── /edit (AdminUserEdit)

matched 数组:
[
  { path: '/admin', component: AdminLayout },        // index 0
  { path: 'users', component: AdminUsers },           // index 1
  { path: ':userId', component: AdminUserDetail },    // index 2
  { path: 'edit', component: AdminUserEdit }          // index 3
]

组件树渲染层级:
App.vue
  └── <router-view />  →  渲染 matched[0]: AdminLayout.vue
       └── <router-view />  →  渲染 matched[1]: AdminUsers.vue
            └── <router-view />  →  渲染 matched[2]: AdminUserDetail.vue
                 └── <router-view />  →  渲染 matched[3]: AdminUserEdit.vue

// router-view 组件的简化渲染逻辑
const RouterView = defineComponent({
  name: 'RouterView',
  props: {
    name: { type: String, default: 'default' }
  },
  setup(props, { slots }) {
    // 从父级注入当前路由
    const route = inject(routeKey)!
    // 获取当前 router-view 的深度
    const depth = inject(viewDepthKey, 0)
    
    // 从 matched 数组中获取对应深度的路由记录
    const matchedRouteRef = computed(() => {
      return route.matched[depth]
    })
    
    // 为子级 router-view 提供递增的 depth
    provide(viewDepthKey, depth + 1)
    
    return () => {
      const matchedRoute = matchedRouteRef.value
      if (!matchedRoute) return null
      
      const ViewComponent = matchedRoute.components[props.name]
      if (!ViewComponent) return null
      
      return h(ViewComponent)
    }
  }
})

// benchmark 对比代码
function benchmark() {
  const iterations = 10000
  
  // 深度嵌套路由
  const deepRoutes = createDeepRoutes([
    { path: '/a', children: [
      { path: 'b', children: [
        { path: 'c', children: [
          { path: 'd', children: [
            { path: 'e', component: E }
          ]}
        ]}
      ]}
    ]}
  ])
  
  // 扁平路由
  const flatRoutes = [
    { path: '/a/b/c/d/e', component: E }
  ]
  
  const deepMatcher = new RouteMatcher(deepRoutes)
  const flatMatcher = new RouteMatcher(flatRoutes)
  
  console.time('深度嵌套匹配')
  for (let i = 0; i < iterations; i++) {
    deepMatcher.resolve('/a/b/c/d/e')
  }
  console.timeEnd('深度嵌套匹配')
  
  console.time('扁平路由匹配')
  for (let i = 0; i < iterations; i++) {
    flatMatcher.resolve('/a/b/c/d/e')
  }
  console.timeEnd('扁平路由匹配')
}

// 命名视图的解析逻辑（简化版）
function resolveNamedViews(
  matchedRoute: RouteRecordNormalized,
  depth: number
): Record<string, VNode> {
  const views: Record<string, VNode> = {}
  
  for (const [name, component] of Object.entries(matchedRoute.components)) {
    // 获取该命名视图的 props
    const propsConfig = matchedRoute.props[name]
    const resolvedProps = resolveProps(
      propsConfig,
      matchedRoute,
      currentRoute
    )
    
    views[name] = h(component, resolvedProps)
  }
  
  return views
}

// Props 解析函数
function resolveProps(
  config: boolean | object | ((route: RouteLocation) => object),
  record: RouteRecordNormalized,
  route: RouteLocation
): object {
  if (config === true) {
    // 布尔模式：将 params 全部作为 props
    return { ...route.params }
  }
  if (typeof config === 'function') {
    // 函数模式：动态计算 props
    return config(route)
  }
  if (typeof config === 'object') {
    // 对象模式：静态 props
    return config
  }
  return {}
}

// 命名视图的 Diff 更新策略（简化版）
class NamedViewUpdater {
  private previousViews = new Map<string, Component>()
  private previousProps = new Map<string, object>()
  
  update(
    newComponents: Record<string, Component>,
    newProps: Record<string, object>
  ): { toUpdate: string[]; toCreate: string[]; toRemove: string[] } {
    const toUpdate: string[] = []
    const toCreate: string[] = []
    const toRemove: string[] = []
    
    // 检测需要移除的视图
    for (const [name] of this.previousViews) {
      if (!(name in newComponents)) {
        toRemove.push(name)
      }
    }
    
    // 检测需要创建或更新的视图
    for (const [name, component] of Object.entries(newComponents)) {
      if (!this.previousViews.has(name)) {
        toCreate.push(name)
      } else if (
        this.previousViews.get(name) !== component ||
        !shallowEqual(this.previousProps.get(name), newProps[name])
      ) {
        toUpdate.push(name)
      }
    }
    
    // 更新缓存
    this.previousViews.clear()
    this.previousProps.clear()
    for (const [name, component] of Object.entries(newComponents)) {
      this.previousViews.set(name, component)
      this.previousProps.set(name, newProps[name])
    }
    
    return { toUpdate, toCreate, toRemove }
  }
}

function shallowEqual(a: any, b: any): boolean {
  if (a === b) return true
  if (!a || !b) return false
  const keysA = Object.keys(a)
  const keysB = Object.keys(b)
  if (keysA.length !== keysB.length) return false
  return keysA.every(key => a[key] === b[key])
}

// layouts/types.ts
type LayoutType = 'default' | 'admin' | 'auth' | 'blank'

interface LayoutMeta {
  layout?: LayoutType
  layoutProps?: Record<string, any>
  keepAlive?: boolean
  cacheKey?: string
}

// 扩展路由 meta 类型
declare module 'vue-router' {
  interface RouteMeta extends LayoutMeta {}
}

// layouts/registry.ts — 布局注册表
const layoutRegistry = new Map<LayoutType, () => Promise<Component>>([
  ['default', () => import('@/layouts/DefaultLayout.vue')],
  ['admin', () => import('@/layouts/AdminLayout.vue')],
  ['auth', () => import('@/layouts/AuthLayout.vue')],
  ['blank', () => import('@/layouts/BlankLayout.vue')],
])

// App.vue — 动态布局选择器
// <template>
//   <component :is="layoutComponent" v-bind="layoutProps">
//     <router-view v-slot="{ Component, route }">
//       <transition :name="route.meta.transition || 'fade'" mode="out-in">
//         <keep-alive :include="cachedComponents">
//           <component :is="Component" :key="route.meta.cacheKey || route.fullPath" />
//         </keep-alive>
//       </transition>
//     </router-view>
//   </component>
// </template>

// composables/useBreadcrumb.ts
export function useBreadcrumb() {
  const route = useRoute()
  
  const breadcrumbs = computed(() => {
    return route.matched
      .filter(r => r.meta?.title)
      .map((r, index, arr) => ({
        title: r.meta.title as string,
        path: index < arr.length - 1
          ? r.path.replace(/:([^/]+)/g, (_, param) => route.params[param] as string)
          : undefined, // 最后一项不可点击
        icon: r.meta.icon as string | undefined,
      }))
  })
  
  return { breadcrumbs }
}

// composables/useRouteCache.ts
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export function useRouteCache() {
  const route = useRoute()
  const router = useRouter()
  
  // 需要缓存的组件名称列表
  const cachedViews = ref<string[]>([])
  // 最大缓存数量
  const maxCache = 10
  
  const includeList = computed(() => cachedViews.value)
  
  // 监听路由变化，自动管理缓存
  watch(
    () => route.path,
    (newPath, oldPath) => {
      const matched = route.matched
      
      // 1. 添加新路由的缓存
      for (const record of matched) {
        if (record.meta.keepAlive && record.name) {
          const name = typeof record.name === 'string' ? record.name : String(record.name)
          if (!cachedViews.value.includes(name)) {
            // LRU 策略：超出上限时移除最早的
            if (cachedViews.value.length >= maxCache) {
              cachedViews.value.shift()
            }
            cachedViews.value.push(name)
          }
        }
      }
      
      // 2. 根据路由方向决定是否移除缓存
      // 从详情页返回列表页时保留列表页缓存
      // 从列表页进入详情页时保留列表页缓存
    },
    { immediate: true }
  )
  
  // 手动清除缓存
  function removeCache(viewName: string) {
    cachedViews.value = cachedViews.value.filter(v => v !== viewName)
  }
  
  // 清除所有缓存
  function clearCache() {
    cachedViews.value = []
  }
  
  // 清除特定路由的缓存
  function removeCacheByRoute(routeName: string) {
    removeCache(routeName)
  }
  
  return {
    includeList,
    cachedViews,
    removeCache,
    clearCache,
    removeCacheByRoute,
  }
}

<!-- 列表页组件 -->
<script setup lang="ts">
import { onActivated, onDeactivated } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const listData = ref<Item[]>([])
const scrollPosition = ref(0)

// 组件被激活时（从缓存恢复）
onActivated(() => {
  // 恢复滚动位置
  if (scrollPosition.value > 0) {
    nextTick(() => {
      document.querySelector('.list-container')?.scrollTo(0, scrollPosition.value)
    })
  }
  
  // 如果需要刷新数据（比如从详情页返回后）
  const shouldRefresh = route.meta.refreshOnActivate
  if (shouldRefresh) {
    refreshData()
  }
})

// 组件被缓存时
onDeactivated(() => {
  // 保存滚动位置
  const container = document.querySelector('.list-container')
  if (container) {
    scrollPosition.value = container.scrollTop
  }
})
</script>

// router/modules/registry.ts
import type { RouteRecordRaw } from 'vue-router'

// 路由模块注册表
interface RouteModule {
  order: number        // 加载顺序
  routes: RouteRecordRaw[]
  namespace: string    // 模块命名空间
}

const routeModuleRegistry = new Map<string, RouteModule>()

// 注册路由模块
export function registerRouteModule(
  name: string,
  module: RouteModule
): void {
  if (routeModuleRegistry.has(name)) {
    console.warn(`[Router] 路由模块 "${name}" 已注册，将被覆盖`)
  }
  routeModuleRegistry.set(name, module)
}

// 获取所有路由模块（按 order 排序）
export function getRegisteredRoutes(): RouteRecordRaw[] {
  const modules = Array.from(routeModuleRegistry.values())
    .sort((a, b) => a.order - b.order)
  
  return modules.flatMap(m => m.routes)
}

// 各业务模块的路由定义
// router/modules/user.routes.ts
import { registerRouteModule } from './registry'

registerRouteModule('user', {
  order: 10,
  namespace: 'user',
  routes: [
    {
      path: '/user',
      component: () => import('@/layouts/UserLayout.vue'),
      meta: { requiresAuth: true },
      children: [
        { path: '', name: 'UserList', component: () => import('@/views/user/List.vue') },
        { path: ':id', name: 'UserDetail', component: () => import('@/views/user/Detail.vue') },
      ]
    }
  ]
})

// router/index.ts
import './modules/user.routes'
import './modules/product.routes'
import './modules/order.routes'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...getRegisteredRoutes(),
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/views/NotFound.vue') }
  ]
})

// composables/useRouteAnalytics.ts
export function useRouteAnalytics() {
  const router = useRouter()
  
  // 路由访问计数器
  const routeAccessCount = new Map<string, { count: number; lastAccess: number }>()
  
  // 监听路由变化
  router.afterEach((to) => {
    const name = to.name?.toString() || to.path
    const existing = routeAccessCount.get(name)
    
    routeAccessCount.set(name, {
      count: (existing?.count || 0) + 1,
      lastAccess: Date.now(),
    })
  })
  
  // 找出未使用的路由（30天内未访问）
  function findUnusedRoutes(days: number = 30): string[] {
    const threshold = Date.now() - days * 24 * 60 * 60 * 1000
    const allRoutes = router.getRoutes()
      .filter(r => r.name)
      .map(r => r.name!.toString())
    
    return allRoutes.filter(name => {
      const stats = routeAccessCount.get(name)
      return !stats || stats.lastAccess < threshold
    })
  }
  
  // 获取路由访问热度排名
  function getHotRoutes(limit: number = 10): Array<{ name: string; count: number }> {
    return Array.from(routeAccessCount.entries())
      .sort((a, b) => b[1].count - a[1].count)
      .slice(0, limit)
      .map(([name, stats]) => ({ name, count: stats.count }))
  }
  
  // 路由 Tree 可视化工具
  function generateRouteTreeHTML(): string {
    const routes = router.getRoutes()
    const root = routes.filter(r => !r.path.includes('/') || r.path === '/')
    
    function buildTreeHTML(routes: any[], depth: number = 0): string {
      return routes.map(r => `
        <div style="padding-left: ${depth * 20}px; margin: 4px 0;">
          <span style="color: ${r.meta?.requiresAuth ? '#e6a23c' : '#67c23a'}">
            ${r.path}
          </span>
          <span style="color: #909399; margin-left: 8px;">
            ${r.name || '(unnamed)'}
          </span>
          <span style="color: #409eff; margin-left: 8px;">
            ${r.component ? '→ component' : ''}
          </span>
          ${r.children ? buildTreeHTML(r.children, depth + 1) : ''}
        </div>
      `).join('')
    }
    
    return buildTreeHTML(root)
  }
  
  return {
    findUnusedRoutes,
    getHotRoutes,
    generateRouteTreeHTML,
  }
}

// ❌ 问题：过深的嵌套路由导致组件树庞大
// 每次路由切换都要销毁/重建大量组件实例

// ✅ 解决方案：合理设计嵌套层级
const MAX_NESTING_DEPTH = 3

function validateRouteNesting(
  routes: RouteRecordRaw[],
  depth: number = 0
): string[] {
  const warnings: string[] = []
  
  for (const route of routes) {
    const currentDepth = depth + (route.children ? 1 : 0)
    
    if (currentDepth > MAX_NESTING_DEPTH) {
      warnings.push(
        `路由 ${route.path} 嵌套层级过深（${currentDepth}层），建议扁平化处理`
      )
    }
    
    if (route.children) {
      warnings.push(...validateRouteNesting(route.children, currentDepth))
    }
  }
  
  return warnings
}

<!-- ❌ 错误：使用 route.fullPath 作为 key，每次路径变化都销毁重建 -->
<router-view :key="$route.fullPath" />

<!-- ❌ 错误：使用 route.path 作为 key，同路径不同参数也会重建 -->
<router-view :key="$route.path" />

<!-- ✅ 正确：使用 route.name 作为 key，同组件复用 -->
<router-view :key="$route.name" />

<!-- ✅ 最佳实践：使用 meta.cacheKey 灵活控制 -->
<router-view v-slot="{ Component, route }">
  <component 
    :is="Component" 
    :key="route.meta.cacheKey || route.name" 
  />
</router-view>

// composables/useRouteRenderDebug.ts
// 开发环境下检测不必要的重渲染
export function useRouteRenderDebug(componentName: string) {
  if (import.meta.env.DEV) {
    const renderCount = ref(0)
    const route = useRoute()
    
    onBeforeUpdate(() => {
      renderCount.value++
      console.log(
        `[${componentName}] 第 ${renderCount.value} 次渲染`,
        `路由: ${route.path}`,
        `参数: ${JSON.stringify(route.params)}`,
        `查询: ${JSON.stringify(route.query)}`
      )
      
      if (renderCount.value > 10) {
        console.warn(
          `[${componentName}] 渲染次数过多（${renderCount.value}次），可能存在不必要的重渲染`
        )
      }
    })
    
    return { renderCount }
  }
  
  return { renderCount: ref(0) }
}