15.1.1 引入Vue Router-Vue.js从入门到精通(三)

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

### 15.1.1 引入Vue Router

在Vue.js的应用开发中，随着项目复杂度的增加，单页面应用（SPA）成为了主流的开发模式。Vue Router作为Vue.js的官方路由管理器，它允许我们构建单页面应用时，通过不同的URL访问不同的页面组件，而无需重新加载页面。这一章，我们将深入探讨如何在Vue.js项目中引入并使用Vue Router，以实现组件的按需加载和路由的灵活管理。

#### 15.1.1.1 理解Vue Router的基本概念

在深入实践之前，理解Vue Router的几个核心概念是至关重要的：

- **路由（Route）**：定义了URL路径与组件之间的映射关系。每当URL改变时，Vue Router就会查找对应的路由，并渲染相应的组件。
- **路由表（Routes）**：一个包含多个路由记录的数组，每个路由记录都映射一个路径到一个组件。
- **路由器实例（Router Instance）**：根据路由表创建的对象，它包含了进行路由匹配和导航的方法。
- **导航（Navigation）**：用户通过点击链接或程序逻辑改变URL，Vue Router会监听这些变化，并渲染对应的组件。
- **视图（View）**：用于渲染路由匹配到的组件的容器。在Vue Router中，通常使用`<router-view>`组件作为视图容器。

#### 15.1.1.2 安装Vue Router

首先，你需要在你的Vue.js项目中安装Vue Router。如果你正在使用Vue CLI创建的项目，可以通过Vue CLI的插件系统轻松安装Vue Router。对于非Vue CLI项目或需要手动安装的情况，可以通过npm或yarn来安装：

```bash
npm install vue-router
# 或者
yarn add vue-router
```

#### 15.1.1.3 创建路由表和路由器实例

安装完成后，你需要创建一个路由表，并基于这个路由表创建路由器实例。以下是一个简单的示例：

```javascript
// 引入Vue和VueRouter
import Vue from 'vue';
import Router from 'vue-router';

// 引入需要路由的组件
import Home from './views/Home.vue';
import About from './views/About.vue';

// 告诉Vue使用VueRouter
Vue.use(Router);

// 定义路由
// 每个路由应该映射一个路径和组件
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

// 创建router实例，然后传`routes`配置
// 你还可以传入其他配置参数, 但为了简单起见，这里先省略
const router = new Router({
  mode: 'history', // 使用HTML5 History模式
  base: process.env.BASE_URL, // 基础路径
  routes // （缩写）相当于 routes: routes
});

export default router;
```

在上面的代码中，我们首先引入了Vue和VueRouter，并告诉Vue使用VueRouter。然后，我们定义了两个路由，分别对应首页和关于页面，并将它们映射到对应的组件上。最后，我们创建了一个router实例，指定了路由模式为`history`（这会让URL看起来更自然，没有`#`号），并导出了这个router实例，以便在Vue应用中使用。

#### 15.1.1.4 在Vue应用中使用Vue Router

创建了router实例后，你需要在Vue应用中注册并使用它。这通常是在创建Vue实例时完成的：

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

new Vue({
  router, // 将router实例注入到vue的根实例中
  render: h => h(App)
}).$mount('#app');
```

在Vue组件中，你可以使用`<router-link>`组件来创建导航链接，它会渲染为标准的`<a>`标签，但具有Vue Router的导航功能。同时，`<router-view>`组件会作为路由出口，Vue Router会根据当前路由渲染对应的组件到`<router-view>`中。

```html

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

#### 15.1.1.5 路由守卫

Vue Router提供了路由守卫（Route Guards）功能，允许你在路由跳转前后执行特定的逻辑。这可以用于权限验证、页面标题设置、数据预加载等多种场景。路由守卫主要分为三种：全局守卫、路由独享的守卫、组件内的守卫。

- **全局守卫**：可以注册在router实例上，对所有路由生效。
- **路由独享的守卫**：定义在路由配置上，只对该路由生效。
- **组件内的守卫**：定义在组件内部，可以在路由进入该组件的对应守卫钩子中执行逻辑。

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

```javascript
router.beforeEach((to, from, next) => {
  // 假设有一个函数用于检查用户是否登录
  if (!isAuthenticated()) {
    // 如果用户未登录，重定向到登录页面
    next('/login');
  } else {
    // 确保一定要调用 next()
    next();
  }
});
```

#### 15.1.1.6 路由元信息

在Vue Router中，你还可以为路由定义元信息（meta），这些元信息可以包括一些自定义的数据，如页面标题、是否需要验证等。在路由守卫或组件内部，你可以通过`$route.meta`访问到这些信息。

```javascript
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  },
  // 其他路由...
];

// 在路由守卫中使用meta信息
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否登录
    // ...
  }
  next();
});
```

#### 15.1.1.7 路由懒加载

随着应用的增长，我们需要考虑性能优化。路由懒加载是一种常用的优化手段，它允许我们按需加载路由对应的组件，而不是在应用启动时一次性加载所有组件。Vue Router支持基于Webpack的代码分割功能来实现路由懒加载。

```javascript
const routes = [
  {
    path: '/',
    name: 'Home',
    // 使用动态import()语法实现懒加载
    component: () => import('./views/Home.vue')
  },
  // 其他路由...
];
```

通过这种方式，只有当用户访问到对应的路由时，相应的组件才会被加载，从而减少了应用的初始加载时间。

#### 总结

在本章中，我们深入探讨了如何在Vue.js项目中引入和使用Vue Router。从理解Vue Router的基本概念开始，到安装、创建路由表、在Vue应用中使用Vue Router，再到路由守卫、路由元信息和路由懒加载等高级特性的应用，我们逐步构建了一个完整的Vue Router使用指南。希望这些内容能帮助你更好地在Vue.js项目中实现高效的路由管理。

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

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

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

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

Vue原理与源码解析

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

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

移动端开发指南

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

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

Vue面试指南

Vue3技术解密

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