Vue 中嵌套路由怎么定义？

在 Vue 中，嵌套路由（Nested Routes）是指在一个路由中嵌套另一个路由，允许你在一个路由组件内部定义子路由。这样可以实现更加灵活的路由结构和组织。

嵌套路由的定义方法：

1. 路由配置：使用 Vue Router 的路由配置项中的 children 字段来定义子路由。

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: ParentComponent,
      children: [
        {
          path: 'child', // 子路由路径会追加到父路由路径后面
          component: ChildComponent
        },
        // 更多子路由...
      ]
    },
    // 更多父路由...
  ]
});

2. 在父组件中使用 <router-view>：在父组件中使用 <router-view> 标签来渲染子路由的内容。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>Parent Component</h2>
    <router-view></router-view> <!-- 渲染子路由内容 -->
  </div>
</template>

在这个例子中，当访问 /parent 路径时，ParentComponent 组件会被渲染，并且它内部定义的 <router-view> 会根据子路由的路径动态加载渲染相应的 ChildComponent。

这种嵌套路由的方式允许你在应用中创建更加复杂的路由结构，对不同层级的页面进行组织和管理。