编辑“︁Vue Router嵌套路由”︁

{{DISPLAYTITLE:Vue Router嵌套路由}}

'''Vue Router嵌套路由'''是Vue.js官方路由库的核心功能之一，允许开发者在路由配置中创建层次化的视图结构。本文将详细介绍其工作原理、配置方法和实际应用场景。

== 概念介绍 ==
嵌套路由（Nested Routes）是指路由配置中存在父子关系的结构，子路由的组件会渲染在父路由组件的<code><router-view></code>占位符中。这种设计模式适用于：

* 需要保持部分布局不变的场景（如导航栏/侧边栏）
* 具有层级关系的页面结构（如用户中心/订单管理）
* 需要动态加载子视图的复杂应用

== 基础配置 ==
=== 路由定义 ===
在路由配置中使用<code>children</code>属性定义嵌套关系：

<syntaxhighlight lang="javascript">
const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: 'profile', // 实际路径为 /user/profile
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]
</syntaxhighlight>

=== 视图层配置 ===
父组件模板中必须包含<code><router-view></code>：

<syntaxhighlight lang="html">
<!-- UserLayout.vue -->
<div class="user-layout">
  <h2>用户中心</h2>
  <nav>
    <router-link to="/user/profile">个人资料</router-link>
    <router-link to="/user/posts">我的文章</router-link>
  </nav>
  <!-- 子路由出口 -->
  <router-view></router-view>
</div>
</syntaxhighlight>

== 高级特性 ==
=== 动态嵌套路由 ===
支持在路径中使用动态参数：

<syntaxhighlight lang="javascript">
{
  path: '/product/:id',
  component: ProductDetail,
  children: [
    {
      path: 'reviews', // 匹配 /product/123/reviews
      component: ProductReviews
    }
  ]
}
</syntaxhighlight>

=== 命名视图嵌套 ===
配合命名视图实现复杂布局：

<syntaxhighlight lang="html">
<!-- 父组件 -->
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>

<!-- 子路由配置 -->
children: [
  {
    path: 'dashboard',
    components: {
      default: DashboardMain,
      header: DashboardHeader,
      footer: DashboardFooter
    }
  }
]
</syntaxhighlight>

== 实际案例 ==
=== 后台管理系统 ===
典型的三层嵌套结构：

<mermaid>
graph LR
  A[AdminLayout] --> B[Dashboard]
  A --> C[Content]
  C --> D[ArticleList]
  C --> E[Category]
  A --> F[Settings]
  F --> G[Profile]
  F --> H[Security]
</mermaid>

对应路由配置：

<syntaxhighlight lang="javascript">
{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: '', component: Dashboard },
    {
      path: 'content',
      component: ContentManagement,
      children: [
        { path: 'articles', component: ArticleList },
        { path: 'categories', component: Category }
      ]
    },
    {
      path: 'settings',
      component: Settings,
      children: [
        { path: 'profile', component: ProfileSettings },
        { path: 'security', component: SecuritySettings }
      ]
    }
  ]
}
</syntaxhighlight>

== 最佳实践 ==
1. '''路径设计原则'''：
   * 使用扁平化路径（避免超过3层嵌套）
   * 保持URL语义化（如<code>/user/:id/posts</code>）

2. '''性能优化'''：
   * 对不常访问的子路由使用懒加载
   * 考虑路由组件缓存策略

3. '''错误处理'''：
   * 为子路由添加默认重定向
   * 处理404子路由情况

<syntaxhighlight lang="javascript">
// 默认重定向示例
children: [
  { path: '', redirect: 'profile' },
  // ...其他子路由
]
</syntaxhighlight>

== 常见问题 ==
* '''Q：如何获取嵌套路由参数？'''
  A：在子组件中通过<code>this.$route.params</code>访问，父组件参数会自动继承

* '''Q：嵌套路由如何实现过渡动画？'''
  A：在父组件的<code><router-view></code>外包裹<code><transition></code>

* '''Q：深层嵌套时如何简化路径跳转？'''
  A：使用命名路由或相对路径（如<code>:to="{ name: 'user.profile' }"</code>）

== 数学表达 ==
在计算路由匹配优先级时，Vue Router使用路径分段权重算法：

<math>
权重 = \sum_{i=0}^{n} \frac{1}{2^i} \times 类型系数
</math>

其中类型系数：
* 静态段 = 1
* 动态段 = 0.8
* 通配段 = 0.5

== 总结 ==
嵌套路由是构建中大型Vue应用的必备技术，通过合理的层级设计可以：
* 实现布局复用
* 简化状态管理
* 提升代码可维护性

建议开发者结合项目实际需求，灵活运用基础嵌套、动态嵌套和命名视图等特性来构建高效的路由系统。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue Router路由]]