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 的步骤：

打开终端或命令提示符：定位到你的 Vue 项目目录。
使用 npm 或 yarn 安装 Vue Router：
```
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（组件）。例如：

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 实例：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
export default router

3. 注入路由实例

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

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 属性，指定要导航到的路由地址：

<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 记录。

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

15.1.5 路由守卫

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

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

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

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 的使用，对于开发现代单页面应用至关重要。