跳到主要内容

Vue Router嵌套路由

在构建复杂的单页应用（SPA）时，页面通常由多个层级组成。例如，一个用户仪表盘页面可能包含多个子页面，如个人资料、设置和通知。Vue Router的嵌套路由功能允许我们在一个路由中嵌套另一个路由，从而更好地组织和管理这些层级结构。

什么是嵌套路由？​

嵌套路由是指在一个路由组件内部定义子路由。这些子路由可以渲染在父路由组件的特定位置（通常是 <router-view> 组件中）。通过嵌套路由，我们可以将页面的不同部分模块化，使代码更易于维护和扩展。

基本用法​

1. 定义父路由​

首先，我们需要定义一个父路由。父路由通常是一个包含 <router-view> 的组件，用于渲染子路由。

javascript
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ParentComponent from '../components/ParentComponent.vue';
import ChildComponent from '../components/ChildComponent.vue';

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2. 创建父组件​

父组件 ParentComponent.vue 需要包含一个 <router-view>，用于渲染子路由。

vue
<!-- components/ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <router-view></router-view>
  </div>
</template>

3. 创建子组件​

子组件 ChildComponent.vue 是一个普通的Vue组件，它将在父组件的 <router-view> 中渲染。

vue
<!-- components/ChildComponent.vue -->
<template>
  <div>
    <h2>子组件</h2>
  </div>
</template>

4. 访问嵌套路由​

当访问 /parent/child 时，ParentComponent 会渲染，并且 ChildComponent 会在 ParentComponent 的 <router-view> 中渲染。

实际应用场景​

用户仪表盘​

假设我们正在构建一个用户仪表盘，仪表盘包含多个子页面，如个人资料、设置和通知。我们可以使用嵌套路由来实现这一结构。

javascript
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Profile from '../views/Profile.vue';
import Settings from '../views/Settings.vue';
import Notifications from '../views/Notifications.vue';

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'profile',
        component: Profile,
      },
      {
        path: 'settings',
        component: Settings,
      },
      {
        path: 'notifications',
        component: Notifications,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在 Dashboard.vue 中，我们可以使用 <router-view> 来渲染子路由。

vue
<!-- views/Dashboard.vue -->
<template>
  <div>
    <h1>仪表盘</h1>
    <nav>
      <router-link to="/dashboard/profile">个人资料</router-link>
      <router-link to="/dashboard/settings">设置</router-link>
      <router-link to="/dashboard/notifications">通知</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

动态嵌套路由​

嵌套路由也可以与动态路由结合使用。例如，我们可以根据用户ID动态加载用户信息。

javascript
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '../views/User.vue';
import UserProfile from '../views/UserProfile.vue';
import UserPosts from '../views/UserPosts.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在 User.vue 中，我们可以通过 $route.params.id 获取用户ID，并根据ID加载相应的子路由。

vue
<!-- views/User.vue -->
<template>
  <div>
    <h1>用户 {{ $route.params.id }}</h1>
    <router-view></router-view>
  </div>
</template>

总结​

Vue Router的嵌套路由功能使我们能够轻松地构建复杂的页面结构。通过将路由分层，我们可以更好地组织代码，并使应用更易于维护和扩展。

提示

在实际开发中，嵌套路由常用于构建仪表盘、用户中心等具有层级结构的页面。

附加资源​

练习​

  1. 创建一个包含嵌套路由的Vue应用，模拟一个博客系统。父路由为 /blog，子路由为 /blog/posts 和 /blog/categories。
  2. 尝试在嵌套路由中使用动态路由参数，例如 /blog/:id/comments。

通过以上练习，你将更深入地理解Vue Router的嵌套路由功能。