Vue路由下子路由如何配置与使用？

在 Vue.js 的单页应用（SPA）开发中，路由管理是构建多页视图的核心技术，Vue Router 作为官方路由库，不仅支持基础的路由配置，还提供了强大的子路由（嵌套路由）功能，用于实现层级化的页面结构，子路由允许开发者将复杂的页面拆分为多个模块，例如将用户中心拆分为“个人信息”“订单记录”“地址管理”等子页面，从而提升代码的可维护性和用户体验。

子路由的定义与配置

子路由的本质是在某个父路由下嵌套子路由组件,形成父子层级关系，在 Vue Router 中，配置子路由需在父路由的 children 属性中定义子路由规则，假设有一个父路由 /user，其对应组件为 User.vue，我们可以在该组件中通过 <router-view> 标签渲染子路由内容，子路由的配置示例如下：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile', // 注意：子路由路径无需前导斜杠
        component: UserProfile
      },
      {
        path: 'orders',
        component: UserOrders
      }
    ]
  }
]

上述配置中,当访问 /user/profile 时，User.vue 中的 <router-view> 会渲染 UserProfile 组件，子路由的路径会自动附加到父路由路径后，形成完整的 URL 路径。

子路由的实际应用场景

子路由特别适合管理具有明确层级关系的页面,电商平台的产品详情页通常包含“基本信息”“规格参数”“用户评价”等模块，这些模块可以通过子路由实现动态切换，父路由 /product/:id 负责渲染产品整体布局，而子路由如 /product/:id/detail、/product/:id/specs 则分别对应不同模块的内容。

子路由还能结合动态路由和命名路由使用,在管理后台中，/admin/users 和 /admin/products 可以作为父路由，其下的子路由如 /admin/users/list、/admin/users/create 实现不同功能页面的跳转，同时通过命名路由简化代码编写。

子路由的注意事项

在使用子路由时,需注意以下几点：

1. 路径格式：子路由的路径不应以 开头，否则会被视为根路由。
2. <router-view> 的位置：父组件中必须包含 <router-view>，否则子组件无法渲染。
3. 路由匹配规则：若子路由路径为空，则父路由会直接渲染默认子组件（需配置 redirect 或设置空路径子路由）。

以下是一个子路由路径匹配规则的示例表格：

相关问答FAQs

Q1：子路由中的 <router-view> 必须放在父组件中吗？
A1：是的，子路由的渲染依赖于父组件中的 <router-view> 标签，如果父组件未包含该标签，子组件将无法显示，在 User.vue 中添加 <router-view></router-view>，才能正确渲染 UserProfile 或 UserOrders 等子组件。

Q2：如何在子路由中传递参数？
A2：子路由可以通过以下两种方式传递参数：

1. 动态路由参数：在父路由或子路由路径中定义参数，如 /user/:id/profile，通过 this.$route.params.id 获取。
2. 查询参数：通过 router.push 或 <router-link> 的 query 传递，如 /user/profile?tab=orders，通过 this.$route.query.tab 获取。

合理使用子路由能够显著提升 Vue 应用的模块化程度和用户体验，开发者需根据实际需求灵活配置嵌套结构，确保路由逻辑清晰且易于维护。