在Vue中,嵌套路由(Nested Routes)允许你将组件映射到路由的嵌套路径中。这在构建具有多层嵌套的用户界面时非常有用。使用Vue Router时,你可以在路由配置中使用children
数组来定义嵌套路由。
以下是一个嵌套路由的基本示例:
// router.js 或 router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import User from '@/components/User.vue';
import UserProfile from '@/components/UserProfile.vue';
import UserPosts from '@/components/UserPosts.vue';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
component: Home
},
{
path: '/user/:id',
component: User,
children: [
{
// 当匹配到 /user/:id/profile 时
// UserProfile 将被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当匹配到 /user/:id/posts 时
// UserPosts 将被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
});
export default router;
在这个例子中,User
组件有两个嵌套路由:UserProfile
和UserPosts
。这意味着当你访问/user/:id/profile
时,UserProfile
组件将会被渲染在User
组件的<router-view>
中。同样地,访问/user/:id/posts
时,UserPosts
组件将会被渲染。
在User
组件的模板中,你需要包含一个<router-view>
元素,这是嵌套路由的出口:
<!-- User.vue -->
<template>
<div>
<h1>User {{ $route.params.id }}</h1>
<!-- 嵌套路由的出口 -->
<router-view></router-view>
</div>
</template>
当访问/user/:id
的子路径时,对应的子组件(UserProfile
或UserPosts
)将会渲染在User
组件的<router-view>
中。