15.1 路由基础-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 15.1 路由基础

在Vue.js的应用开发中，随着项目规模的扩大和页面结构的复杂化，单页面应用（SPA, Single Page Application）的概念变得尤为重要。Vue.js社区中，Vue Router作为官方维护的路由管理器，为构建单页面应用提供了强大的支持。本章节将深入讲解Vue Router的基本概念、安装配置、基本用法以及路由的高级特性，帮助读者从入门到精通Vue.js路由管理的各个方面。

#### 15.1.1 理解Vue Router

Vue Router是Vue.js的官方路由管理器，它与Vue.js深度集成，让构建单页面应用变得易如反掌。通过Vue Router，你可以定义应用中不同的URL对应不同的组件，实现页面的无缝切换，而无需重新加载页面。这种方式不仅提升了用户体验，还优化了资源加载，加快了页面响应速度。

#### 15.1.2 安装Vue Router

在Vue 2.x版本中，Vue Router通常需要单独安装。如果你使用的是Vue CLI创建的项目，可以通过Vue CLI的插件系统来添加Vue Router。对于非Vue CLI项目，或者Vue 3.x（配合Vue Router 4.x）项目，可以通过npm或yarn来安装Vue Router。

```bash
# Vue 2.x项目
npm install vue-router@3
# 或者
yarn add vue-router@3

# Vue 3.x项目
npm install vue-router@4
# 或者
yarn add vue-router@4
```

#### 15.1.3 配置Vue Router

安装完成后，你需要在项目中配置Vue Router。这通常涉及到创建路由实例、定义路由映射，并将路由实例挂载到Vue根实例上。

**步骤1：定义路由映射**

路由映射是一个由多个路由记录（route records）组成的数组，每个路由记录都需要至少包含`path`（路径）和`component`（组件）两个属性。

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

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

**步骤2：创建路由实例**

使用`VueRouter`构造函数，传入路由映射（`routes`）和其他配置（如模式`mode`，默认为`hash`模式，也可以设置为`history`模式以去除URL中的`#`），创建路由实例。

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes, // 使用上面定义的routes
  mode: 'history' // 使用history模式
})
```

**步骤3：挂载路由实例**

在Vue根实例的创建过程中，通过`router`选项将路由实例挂载到Vue实例上。

```javascript
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
```

#### 15.1.4 基本路由使用

配置好Vue Router后，你就可以在Vue组件中通过`<router-link>`来创建导航链接，并通过`<router-view>`来展示当前路由对应的组件了。

- **`<router-link>`**：用于声明式地导航到不同的URL，对应一个a标签，但会被Vue Router处理，不会重新加载页面。

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

- **`<router-view>`**：路由出口，用于渲染匹配到的路由组件。

```html
<router-view></router-view>
```

#### 15.1.5 路由嵌套

在Vue Router中，你可以通过子路由（嵌套路由）来组织更复杂的页面结构。子路由的定义方式与普通路由类似，但需要将它们放在某个路由的`children`属性中。

```javascript
const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: '', // 当路径为空时，默认渲染User组件的子路由中的第一个路由
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]
```

在`<router-view>`中，你可以嵌套另一个`<router-view>`来渲染子路由对应的组件。

```html

<template>
  <div>
    <h1>User Page</h1>
    <router-view></router-view> 
  </div>
</template>
```

#### 15.1.6 路由守卫

Vue Router提供了全局守卫、路由独享守卫和组件内守卫三种守卫方式，用于在路由跳转前后执行特定的逻辑，如权限校验、页面标题设置等。

- **全局守卫**：如`beforeEach`、`beforeResolve`和`afterEach`，它们会在每次路由导航时触发。

- **路由独享守卫**：在路由配置中直接定义，只影响当前路由。

- **组件内守卫**：在组件内部定义，包括`beforeRouteEnter`、`beforeRouteUpdate`（2.2+）和`beforeRouteLeave`。

```javascript
// 全局前置守卫示例
router.beforeEach((to, from, next) => {
  // 逻辑处理...
  next(); // 必须调用next()方法来解析守卫中的钩子
});
```

#### 15.1.7 编程式导航

除了使用`<router-link>`进行声明式导航外，Vue Router还提供了编程式导航的API，允许你在JavaScript代码中实现路由跳转。

```javascript
// 使用router.push方法
this.$router.push('/some-path')

// 或带有查询参数，变成/foo?user=1
this.$router.push({ path: 'foo', query: { user: '1' }})

// 使用router.replace方法（不会向history添加新记录）
this.$router.replace('/some-path')

// 命名路由
this.$router.push({ name: 'user', params: { userId: 123 }})
```

#### 15.1.8 总结

通过本章节的学习，你应该已经掌握了Vue Router的基本概念、安装配置、基本用法以及路由的高级特性，如路由嵌套、路由守卫和编程式导航等。Vue Router为Vue.js应用提供了强大的路由管理能力，使得构建复杂的单页面应用变得简单高效。随着你对Vue Router的深入理解和实践，你将能够更加灵活地运用它来优化你的Vue.js应用结构和用户体验。

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

Vue面试指南

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

Vue原理与源码解析

移动端开发指南

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

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

VUE组件基础与实战

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

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

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

Vue3技术解密

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