5. Vue Router4 嵌套路由

在 Vue Router 4 中，嵌套路由是一种非常重要的功能，它允许我们创建更复杂的 UI 结构，同时保持路由的清晰和易于管理。

基本用法

要创建一个嵌套路由，我们可以在路由配置中添加一个 children 属性，这个属性是一个数组，包含了所有的子路由。例如：

const routes = [
  { 
    path: '/user/:id', 
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在这个例子中，当我们访问 /user/1/profile 的时候，UserProfile 组件会被渲染；当我们访问 /user/1/posts 的时候，UserPosts 组件会被渲染。这两个组件都是 User 组件的子组件，它们会被渲染在 User 组件的 <router-view> 中。

嵌套路由的参数传递

在嵌套路由中，我们可以在父路由中定义参数，然后在子路由中访问这些参数。例如：

const User = {
  template: `
    <div>
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserProfile = {
  template: '<div>UserProfile {{ $route.params.id }}</div>'
}

在这个例子中，UserProfile 组件可以访问到父路由中定义的 id 参数。

以上就是嵌套路由的基本用法和一些重要的特性。在实际的开发中，我们可以根据项目的需要，灵活地使用嵌套路由来创建复杂的 UI 结构。