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快速创建一个：

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了。在项目根目录下打开终端或命令提示符，执行以下命令之一：

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的配置入口。

// 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文件中完成。

// 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>：用于创建导航链接，实现点击跳转。

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
/* 样式代码 */
</style>

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

6. 路由懒加载

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

7. 路由守卫

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

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

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

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项目的路由。