Vue教学20：掌握路由基础，使用Vue Router构建单页应用

大家好，欢迎回到我们的Vue教学系列博客！在前十九篇博客中，我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定（单向与双向）、计算属性与侦听器、条件渲染和列表渲染、事件处理、组件之间的传值（props和$emit）、动态组件和异步组件、组件间的通信（provide/inject，event bus），探索并尝试安装一个基于Vue.js的UI框架——Element UI，以及学习如何使用Element UI的多种基础组件，如按钮、输入框、表格、弹窗、卡片、折叠面板、步骤条、时间线、走马灯、评分、级联选择器、树形选择器、颜色选择器、文件上传、菜单、数字输入、单选按钮、复选框、开关、选择器、级联选择器、滑块、评分、日历、走马灯、标签页、进度条、徽章、文字提示、弹出框、抽屉和回到顶部组件。今天，我们将开始一个新的篇章，学习路由的基本概念，并了解如何使用Vue Router构建单页应用。无论你是Vue新手小白，还是有一定基础的开发者，掌握路由的使用都将大大提高你的开发效率。

一、路由的基本概念

路由（Routing）是一种在Web应用中管理页面导航的机制。在传统的多页应用中，每当用户请求一个不同的页面时，服务器会返回一个新的HTML页面。而在单页应用（SPA）中，所有的内容都在一个HTML页面上动态渲染，路由负责根据不同的URL路径显示不同的页面内容。

路由的核心概念包括：

• 路径（Path）：URL中的部分，用于指定资源的位置。
• 路由器（Router）：负责处理URL路径并将其映射到相应的组件或页面。
• 视图（View）：路由器根据当前路由显示的页面内容。
• 组件（Component）：Vue中的路由视图通常由组件构成，用于显示特定的页面内容。

二、Vue Router的安装

Vue Router是Vue.js官方的路由库，用于构建单页应用。要使用Vue Router，首先需要安装它。

1. 使用npm安装

npm install vue-router

2. 使用yarn安装

yarn add vue-router

安装完成后，你可以在项目中引入Vue Router。

三、创建一个简单的Vue Router应用

现在我们来创建一个简单的Vue Router应用，并使用Element UI的组件。

1. 创建Vue项目

如果你还没有安装Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

然后，使用Vue CLI创建一个新项目：

vue create my-vue-router-project

在提示时选择默认配置或自定义配置。

2. 进入项目目录

cd my-vue-router-project

3. 安装Vue Router

在项目目录中，使用npm或yarn安装Vue Router：

npm install vue-router --save

或

yarn add vue-router

4. 配置Vue Router

在src目录下创建一个名为router的新文件夹，并在其中创建一个名为index.js的文件。在这个文件中，配置Vue Router的 routes 和 history 模式。

// 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.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

5. 修改main.js文件

在src/main.js文件中，引入并使用配置好的Vue Router。

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

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

6. 创建Vue组件

在src/views目录下，创建两个新的Vue组件，分别用于Home和About页面。

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

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

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

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

7. 运行项目

使用以下命令运行项目：

npm run serve

打开浏览器，访问http://localhost:8080/，你将看到一个简单的Vue Router应用，其中包含一个Home页面和一个About页面。

四、总结

通过本博客的学习，我们了解了路由的基本概念，并学习了如何使用Vue Router构建单页应用。Vue Router是Vue.js官方的路由库，它提供了灵活的路由管理和页面导航功能，非常适合构建单页应用。我们通过创建一个简单的Vue Router应用，学习了如何在项目中使用Vue Router，以及如何通过Vue CLI来创建和运行一个Vue项目。

掌握Vue Router的使用对于提高Vue.js应用的开发效率非常重要。它不仅可以帮助我们节省时间，还能确保我们的应用拥有良好的用户体验和导航能力。希望这篇博客能帮助你深入理解Vue Router，并在实际项目中灵活运用。

如有任何疑问，欢迎在评论区留言讨论。让我们一起学习，共同进步！

感谢大家一直以来的支持和关注，我们下期博客再见！