15.1 Vue Router的安装与简单使用 -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 15.1 Vue Router的安装与简单使用

在构建单页面应用（SPA）时，页面间的导航和路由管理变得尤为重要。Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，让构建单页应用变得易如反掌。本章节将详细介绍如何在 Vue 项目中安装 Vue Router 并进行简单使用，帮助你理解前端路由的基本概念及实现方式。

#### 15.1.1 理解前端路由

在深入探讨 Vue Router 之前，首先我们需要理解什么是前端路由。传统意义上，路由是后端概念，用于处理 URL 路径与服务器资源的映射关系。然而，在单页面应用中，页面跳转并不涉及服务器请求，而是通过前端代码动态地渲染不同的页面组件。这种通过前端代码控制页面渲染的路由方式，就被称为前端路由。

前端路由的核心在于：监听 URL 的变化，并据此动态地渲染对应的组件或内容，实现页面的“跳转”。Vue Router 正是这样一个工具，它提供了丰富的 API 和配置选项，帮助我们轻松实现前端路由。

#### 15.1.2 安装 Vue Router

要在 Vue 项目中使用 Vue Router，首先需要确保你已经创建了一个 Vue 项目。如果你还没有项目，可以使用 Vue CLI 快速创建一个。以下是在现有 Vue 项目中安装 Vue Router 的步骤：

1. **打开终端或命令提示符**：定位到你的 Vue 项目目录。

2. **使用 npm 或 yarn 安装 Vue Router**：
   ```bash
   npm install vue-router --save
   # 或者
   yarn add vue-router
   ```

这条命令会将 Vue Router 作为项目的依赖添加到 `package.json` 文件中，并下载到 `node_modules` 目录。

#### 15.1.3 配置 Vue Router

安装完 Vue Router 后，接下来需要对其进行配置。配置通常包括定义路由规则、创建路由实例，并将其注入到 Vue 实例中。

##### 1. 定义路由规则

路由规则通常是一个包含多个路由记录的数组，每个路由记录至少包含两个字段：`path`（路径）和 `component`（组件）。例如：

```javascript
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  // 其他路由...
]
```

##### 2. 创建路由实例

接下来，使用这些路由规则创建一个 Vue Router 实例：

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

export default router
```

##### 3. 注入路由实例

最后，将创建的路由实例注入到 Vue 实例中：

```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入上面创建的路由实例

new Vue({
  router, // 注入路由
  render: h => h(App),
}).$mount('#app')
```

#### 15.1.4 使用 Vue Router

一旦 Vue Router 被正确安装和配置，你就可以在 Vue 应用中使用它来导航了。Vue Router 提供了多种方式来声明式地导航到不同的 URL，其中最常用的是 `<router-link>` 组件和编程式导航。

##### 1. 使用 `<router-link>` 组件

`<router-link>` 是 Vue Router 提供的一个组件，用于渲染一个链接，当点击这个链接时，会进行路由跳转。它接受一个 `to` 属性，指定要导航到的路由地址：

```html
<template>
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
</template>
```

##### 2. 编程式导航

除了使用 `<router-link>` 组件进行声明式导航外，Vue Router 还提供了编程式导航的 API，允许你通过 JavaScript 代码来控制路由跳转。常用的编程式导航方法有 `router.push()` 和 `router.replace()`：

- `router.push(location, onComplete?, onAbort?)`：这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器倒退按钮时，会回到之前的 URL。
- `router.replace(location, onComplete?, onAbort?)`：这个方法不会向 history 添加新记录，而是替换掉当前的 history 记录。

```javascript
// 使用 this.$router 访问路由实例
this.$router.push('/about')
// 或
this.$router.replace('/about')
```

#### 15.1.5 路由守卫

Vue Router 提供了路由守卫功能，允许你在路由发生变化前、后执行一些逻辑。路由守卫主要有三种类型：全局守卫、路由独享的守卫、组件内的守卫。

- **全局守卫**：在全局范围内进行守卫，例如，全局前置守卫 `beforeEach`，可以在每次路由跳转前执行逻辑。
- **路由独享的守卫**：在单个路由上定义的守卫，只对该路由有效。
- **组件内的守卫**：在组件内部定义的守卫，包括 `beforeRouteEnter`、`beforeRouteUpdate`（2.2+）、`beforeRouteLeave` 等。

例如，使用全局前置守卫来检查用户是否登录：

```javascript
router.beforeEach((to, from, next) => {
  // 假设有一个函数 isAuthenticated() 用来检查用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要认证
    if (!isAuthenticated()) {
      // 用户未登录，重定向到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面
      })
    } else {
      // 用户已登录，正常访问
      next()
    }
  } else {
    // 路由不需要认证，直接访问
    next()
  }
})
```

#### 15.1.6 总结

通过本章节的学习，你应该已经掌握了 Vue Router 的基本使用方法，包括安装、配置、使用 `<router-link>` 组件进行声明式导航、使用编程式导航进行页面跳转，以及如何利用路由守卫来控制路由的访问权限。Vue Router 的功能远不止于此，它还支持嵌套路由、路由参数传递、懒加载等高级功能，这些将在后续章节中详细介绍。掌握 Vue Router 的使用，对于开发现代单页面应用至关重要。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(一)

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(三)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(二)

Vue3技术解密

Vue源码完全解析

TypeScript和Vue从入门到精通(一)

VUE组件基础与实战

Vue面试指南

移动端开发指南