15.1.1 Vue Router的安装 -TypeScript和Vue从入门到精通(五)

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

### 15.1.1 Vue Router的安装

在Vue.js项目中，随着应用规模的扩大，单页面应用（SPA）的路由管理变得尤为重要。Vue Router是Vue.js的官方路由管理器，它与Vue.js核心深度集成，让构建单页面应用变得易如反掌。在本节中，我们将详细讲解如何在Vue项目中安装和配置Vue Router，以支持页面间的导航和组件的动态渲染。

#### 1. 理解Vue Router的基本概念

在深入探讨安装之前，先简要了解Vue Router的几个核心概念对于后续学习大有裨益：

- **路由（Route）**：定义了应用的路径和对应的组件。例如，路径`/home`可能对应`Home`组件。
- **路由表（Routes）**：一个包含所有路由定义的数组。每个路由应至少包含两个属性：`path`（路径）和`component`（组件）。
- **路由器实例（Router Instance）**：通过Vue Router创建的一个实例，用于全局管理路由。
- **导航守卫（Navigation Guards）**：在路由导航过程中，用于执行权限校验、页面跳转前后的数据处理等逻辑。

#### 2. 环境准备

在开始安装Vue Router之前，请确保你的开发环境已经安装了Node.js和npm（或yarn）。同时，你也应该有一个Vue.js项目作为安装Vue Router的基础。如果你还没有Vue项目，可以使用Vue CLI快速创建一个：

```bash
npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

# 创建一个新的Vue项目
vue create my-vue-project
cd my-vue-project
```

#### 3. 安装Vue Router

一旦你有了Vue项目，就可以通过npm或yarn来安装Vue Router了。在项目根目录下打开终端或命令提示符，执行以下命令之一：

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

安装完成后，`vue-router`将作为项目的依赖被添加到`package.json`文件中，并且你可以在`node_modules`目录下找到它。

#### 4. 配置Vue Router

安装Vue Router之后，下一步是在你的Vue项目中配置它。通常，你会创建一个路由配置文件（例如`router/index.js`），然后在这个文件中定义路由表并创建路由器实例。

##### 4.1 创建路由配置文件

在项目根目录下（或你选择的任何合适的位置），创建一个名为`router`的文件夹，并在其中创建一个`index.js`文件。这个文件将作为Vue Router的配置入口。

```javascript
// src/router/index.js
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',
    // 路由级代码分割
    // 这将自动代码分割这个路由，并且 chunk-name "about"
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
  // 可以继续添加更多的路由...
];

// 创建router实例
const router = new Router({
  mode: 'history', // 使用HTML5 History模式
  base: process.env.BASE_URL, // 基准路径
  routes // （缩写）相当于 routes: routes
});

export default router;
```

##### 4.2 在Vue实例中使用Router

现在，你已经在`router/index.js`中定义了路由和创建了路由器实例，接下来需要在Vue的根实例中使用这个路由器实例。这通常在`main.js`或`app.js`文件中完成。

```javascript
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置

Vue.config.productionTip = false;

new Vue({
  router, // 使用router实例
  render: h => h(App),
}).$mount('#app');
```

#### 5. 使用`<router-view>`和`<router-link>`

在Vue Router配置好之后，你就可以在Vue组件中使用`<router-view>`和`<router-link>`来展示和导航路由了。

- `<router-view>`：用于渲染匹配的组件。
- `<router-link>`：用于创建导航链接，实现点击跳转。

```vue

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

在上面的例子中，`<router-link>`组件用于创建到首页和关于页面的链接，而`<router-view>`则用于显示当前路由对应的组件。

#### 6. 路由懒加载

在Vue Router中，你可以利用Webpack的代码分割功能来实现路由的懒加载。这意呀着只有当用户访问某个路由时，才会加载对应的组件代码。在上面的路由配置示例中，我们已经展示了如何使用动态导入（`import()`）来实现这一点。

#### 7. 路由守卫

Vue Router提供了导航守卫，允许你在路由跳转前后执行逻辑。这对于权限控制、数据预加载等场景非常有用。

- **全局守卫**：`beforeEach`、`beforeResolve`、`afterEach`
- **路由独享的守卫**：`beforeEnter`
- **组件内的守卫**：`beforeRouteEnter`、`beforeRouteUpdate`（2.2+）、`beforeRouteLeave`

例如，你可以使用`beforeEach`守卫来检查用户是否登录：

```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(); // 确保一定要调用 next()
  }
});
```

#### 8. 总结

通过本节的介绍，你应该已经掌握了如何在Vue项目中安装和配置Vue Router。从理解Vue Router的基本概念，到实际创建路由配置文件、在Vue实例中使用路由器，再到使用`<router-view>`和`<router-link>`实现页面导航，以及了解路由懒加载和路由守卫等高级功能，这些都是构建现代Vue.js应用不可或缺的技能。希望这些内容能帮助你更好地利用Vue Router来管理你的Vue.js项目的路由。

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

移动端开发指南

Vue3技术解密

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

VUE组件基础与实战

Vue面试指南

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

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

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

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

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

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

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