跳到主要内容

第7章：Vue 的路由管理

7.1 章节概述​

在单页应用（SPA）中，路由管理是必不可少的功能。Vue 的路由管理解决方案是 Vue Router，它能够帮助我们实现页面的导航与跳转，并且支持动态路由、嵌套路由等高级功能。

本章将从以下几个方面详细介绍 Vue Router 的使用：

  • Vue Router 的安装与配置
  • 路由的基本使用（路由定义、导航）
  • 动态路由与嵌套路由

通过本章学习，你将能够掌握 Vue 的路由管理技术，并在实际项目中灵活运用这些知识。

7.2 Vue Router 的安装与配置​

7.2.1 安装 Vue Router​

要使用 Vue Router，首先需要通过 npm（Node Package Manager）安装它：

npm install vue-router@next

对于 Vue 3 项目，推荐使用 vue-router@next 版本。

7.2.2 配置 Vue Router​

安装完成后，需要在 Vue 项目中进行配置。我们通常将配置文件命名为 router.js 或 router/index.js。下面是一个基本的配置示例：

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About }
]

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

export default router

在 main.js 文件中引入路由配置：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)

7.2.3 配置要点说明​

  1. createRouter：用于创建路由器实例。
  2. createWebHistory：定义了路由器使用的 history 模式，createWebHistory 是 HTML5 History 模式的实现。
  3. routes：定义路由规则，每个路由规则包含 path（路径）和 component（组件）。
  4. name：为路由命名，方便在代码中引用。

7.3 路由的基本使用​

7.3.1 定义路由​

在 router.js 文件中，我们已经定义了两个路由规则：

  • 路径为 / 对应 Home.vue 组件。
  • 路径为 /about 对应 About.vue 组件。

7.3.2 导航​

在 Vue 组件中，可以通过以下方式实现页面导航：

<router-link> 是 Vue Router 提供的一个组件，用于生成带有导航功能的链接。

<template>
  <div>
    <h1>导航栏</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

使用 <router_view> 渲染组件​

<router-view> 是一个特殊的组件，用于展示当前路由对应的组件内容。

<template>
  <div>
    <nav_bar />
    <router-view />
  </div>
</template>

程序式导航​

你也可以通过 JavaScript 代码进行导航。例如：

<template>
  <button @click="goToAbout">跳转到 About</button>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

7.3.3 路由导航的总结​

  • <router-link> 是声明式的导航方式，推荐在模板中使用。
  • <router-view> 用于展示当前路由对应的组件内容。
  • 通过 this.$router.push() 可以实现程序式的导航。

7.4 动态路由与嵌套路由​

7.4.1 动态路由​

动态路由是指 URL 中包含动态参数的路由。例如，一篇文章的详情页 URL 可能是 /article/123，其中 123 是文章的 ID。

定义动态路由​

在 router.js 文件中，可以这样定义动态路由：

const routes = [
  { path: '/article/:id', name: 'articleDetail', component: ArticleDetail }
]

: 符号表示动态参数，id 是参数名。

访问动态参数​

在组件中，可以通过 $route.params 访问动态参数：

<template>
  <div>
    <h2>文章详情</h2>
    <p>文章 ID: {{ $route.params.id }}</p>
  </div>
</template>

7.4.2 嵌套路由​

嵌套路由是指在一个路由中嵌套多个子路由。嵌套路由适用于管理多视图的情况，例如侧边栏和主内容区需要同时变化的场景。

定义嵌套路由​

在 router.js 文件中，可以这样定义嵌套路由：

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: AdminLayout,
    children: [
      { path: 'dashboard', name: 'dashboard', component: Dashboard },
      { path: 'users', name: 'users', component: Users }
    ]
  }
]

嵌套路由的使用​

在父组件中使用嵌套路由：

<template>
  <div class="admin-layout">
    <sidebar />
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

导航到嵌套路由​

嵌套路由的路径要加上父路由的路径。例如，导航到 admin/dashboard：

this.$router.push('/admin/dashboard')

7.4.3 嵌套路由的应用场景​

  • 适用于复杂的管理界面，如后台管理系统。
  • 可以方便地管理多视图的布局和导航。

7.5 本章总结​

本章详细介绍了 Vue 的路由管理知识，包括：

  • Vue Router 的安装与配置。
  • 路由的基本使用，包括 navigating 和组件展示。
  • 动态路由和嵌套路由的应用。

通过本章内容，你应该能够根据需求实现一个完整的路由管理系统。

下一章我们将继续学习 Vue 的状态管理相关内容，期待你的继续学习！

最后于 更新