Vue Router4 嵌套路由的示例代码
作者：日里安
在 Vue Router 4 中,嵌套路由是一种非常重要的功能,它允许我们创建更复杂的 UI 结构,同时保持路由的清晰和易于管理,这篇文章主要介绍了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 结构。