【Vue.js进阶】2、Vue Router：构建单页应用的路由系统

【Vue.js进阶】Vue Router：构建单页应用的路由系统

---

Vue.js进阶系列文章导航

【Vue.js进阶】1、深入响应式原理
【Vue.js进阶】2、Vue Router：构建单页应用的路由系统（本文）
【Vue.js进阶】3、Vuex：状态管理的最佳实践
【Vue.js进阶】4、组合式API：使用 Composition API 构建复杂组件
【Vue.js进阶】5、插件与自定义指令
【Vue.js进阶】6、单元测试与端到端测试
【Vue.js进阶】7、性能优化：提升你的 Vue 应用速度
【Vue.js进阶】8、服务端渲染（SSR）与 Nuxt.js 简介
【Vue.js进阶】9、国际化：多语言支持
【Vue.js进阶】10、与第三方库的集成：Axios、Lodash等

---

在本篇文章中，我们将详细介绍如何使用 Vue Router 来构建单页应用（SPA）。Vue Router 是 Vue.js 官方的路由管理器，提供了丰富的功能来帮助我们管理应用中的路由和导航。我们将从基本概念开始，逐步深入，最终构建一个简单的单页应用示例。

1. Vue Router 概述

Vue Router 是 Vue.js 官方的路由库，用于构建单页应用（SPA）。它允许我们定义多个视图，每个视图对应一个路径，并且路径之间可以自由切换而无需刷新页面。

核心概念

• 路由（Route）：定义路径和组件的映射关系。
• 路由器（Router）：管理路由和视图之间的切换。

2. 安装 Vue Router

首先，我们需要安装 Vue Router。你可以使用 Vue CLI 创建一个包含 Vue Router 的项目，或者手动添加 Vue Router。

使用 Vue CLI 创建项目

vue create my-vue-app
cd my-vue-app
vue add router

手动安装

如果你已经有一个 Vue 项目，可以通过 npm 或 yarn 安装 Vue Router：

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

3. 配置 Vue Router

安装完成后，我们需要在项目中配置路由器。

创建路由配置

在 src 目录下创建一个 router 文件夹，并在其中创建 index.js 文件：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

在主应用中使用路由器

编辑 src/main.js 文件，将路由器添加到 Vue 实例中：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

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

4. 定义视图组件

在 src/views 目录下创建两个视图组件：Home.vue 和 About.vue。

Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue

<template>
  <div>
    <h1>About</h1>
    <p>This is the About page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

5. 添加导航链接

在 src/App.vue 文件中添加导航链接和路由视图：

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

<script>
export default {
  name: 'App'
};
</script>

<style>
nav {
  margin-bottom: 1em;
}

router-link {
  margin-right: 1em;
}
</style>

6. 高级用法

动态路由匹配

Vue Router 支持动态路由匹配。你可以在路径中使用动态参数：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
];

在组件中，你可以通过 this.$route.params 访问路由参数：

<template>
  <div>
    <h1>User {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
};
</script>

路由守卫

Vue Router 提供了多种导航守卫，允许你在导航前后执行逻辑。常见的守卫有全局守卫、路由独享守卫和组件内守卫。

全局守卫

router.beforeEach((to, from, next) => {
  // 执行一些逻辑
  next();
});

路由独享守卫

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    beforeEnter: (to, from, next) => {
      // 执行一些逻辑
      next();
    }
  }
];

组件内守卫

export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由变化但组件被复用时调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    next();
  }
};

7. 小结

通过本篇文章，我们了解了如何使用 Vue Router 创建一个简单的单页应用，并探索了一些高级用法。Vue Router 强大的功能和灵活的 API 使得我们可以轻松地管理应用中的路由和导航。

在下一篇文章中，我们将探讨 Vuex，了解如何在 Vue 应用中进行状态管理。敬请期待！

---

这里是爪磕~感谢您的到来与关注，持续为您带来高质教学！Happy coding! 🎉