面试题：在什么场景下会用到 Vue Router 的嵌套路由？

Vue Router 的 嵌套路由 是一种将路由层级化的技术，允许在父路由的组件中嵌套子路由的组件。嵌套路由的使用场景通常与应用的页面结构和布局有关，以下是一些常见的场景：

1. 多层布局的页面结构

当应用中有多层布局时，嵌套路由可以帮助你更好地组织路由和组件。例如：

后台管理系统：通常有一个侧边栏和顶部导航栏作为父布局，内容区域根据路由动态加载子组件。
用户中心：用户中心可能包含多个子页面（如个人资料、订单记录、设置等），这些子页面共享相同的父布局。

示例：

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout, // 父布局
    children: [
      {
        path: 'profile',
        component: UserProfile, // 子页面
      },
      {
        path: 'orders',
        component: UserOrders, // 子页面
      },
    ],
  },
];

2. 动态路由嵌套

当路由需要根据动态参数嵌套时，嵌套路由可以很好地支持这种需求。例如：

博客系统：博客文章详情页可能嵌套在某个分类或标签下。
电商系统：商品详情页可能嵌套在某个分类或品牌下。

示例：

const routes = [
  {
    path: '/category/:id',
    component: CategoryLayout, // 父布局
    children: [
      {
        path: 'product/:productId',
        component: ProductDetail, // 子页面
      },
    ],
  },
];

3. 共享布局和功能

当多个页面需要共享相同的布局或功能时，可以使用嵌套路由。例如：

Tab 切换：多个 Tab 页共享相同的顶部 Tab 栏。
分步表单：多步骤表单的每一步共享相同的表单布局。

示例：

const routes = [
  {
    path: '/form',
    component: FormLayout, // 父布局
    children: [
      {
        path: 'step1',
        component: Step1, // 子页面
      },
      {
        path: 'step2',
        component: Step2, // 子页面
      },
    ],
  },
];

4. 模块化路由

当应用按模块划分时，嵌套路由可以帮助你更好地组织代码。例如：

用户模块：用户相关的路由（如登录、注册、个人中心）可以嵌套在一个父路由下。
管理模块：管理员相关的路由（如用户管理、权限管理）可以嵌套在一个父路由下。

示例：

const routes = [
  {
    path: '/user',
    component: UserLayout, // 父布局
    children: [
      {
        path: 'login',
        component: Login, // 子页面
      },
      {
        path: 'register',
        component: Register, // 子页面
      },
    ],
  },
];

5. 懒加载优化

嵌套路由可以与 Vue Router 的懒加载结合，优化应用的性能。例如：

父路由和子路由的组件可以按需加载，减少初始加载时间。

示例：

const routes = [
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'), // 懒加载父布局
    children: [
      {
        path: 'users',
        component: () => import('@/views/AdminUsers.vue'), // 懒加载子页面
      },
      {
        path: 'settings',
        component: () => import('@/views/AdminSettings.vue'), // 懒加载子页面
      },
    ],
  },
];

6. 动态面包屑导航

在需要动态生成面包屑导航的场景中，嵌套路由可以帮助你更好地管理路由层级。例如：

根据嵌套路由的层级动态生成面包屑导航。

示例：

const routes = [
  {
    path: '/shop',
    component: ShopLayout, // 父布局
    children: [
      {
        path: 'category/:id',
        component: CategoryPage, // 子页面
        children: [
          {
            path: 'product/:productId',
            component: ProductPage, // 子页面
          },
        ],
      },
    ],
  },
];