Vue全家桶：路由 vue-router

1. 什么是路由

1.1 概述

路由是网络工程里面的一个术语，它主要是通过互联的网络把信息从源地址传输到目的地址的活动。

路由是决定数据包从来源到目的地的路径，其实本质就是通过路由表映射，决定数据指向。

vue中借用了这个思想，诞生了路由 vue-router

1.2 后端路由阶段

概述： 早期的网站开发整个HTML页面是由服务器来渲染的，然后返回给客户端进行展示。
过程:
1.前端输入的URL会发送到服务器，服务器通过正则对该URL进行匹配，并且最后交给一个Controller进行处理。
2.Controller进行相应处理，最终生成HTML或者数据，返回给前端
映射关系： 服务器根据页面传来的不同URL进行不同的渲染
缺点： 整个页面模块需由后端人员来编写和维护，而且通常情况下HTML代码和数据以及逻辑会混在一起，不易于编写维护。

1.1 前端路由阶段

概述： 前端路由阶段，是因为ajax的出现，其实也就是前后端分离阶段。
过程：
1.后端提供API数据接口
2.前端通过在静态服务器上获取html、css、js
3.前端发送ajax从后端请求获取数据，通过JS将数据渲染到页面
优点：
1.前后端责任清晰，后端专注数据，前端专注交互和可视化
2.由于统一接口，因此PC端还是移动端使用同一套API即可，后端无需任何处理
单页面富应用阶段：SPA
其实就是在前后端分离上增加了一层前端路由。
前端路由将从静态服务器上一次性获取到的数据分成相应的页面，其实就是根据模块来分，然后改变url来显示不同的页面
优点：页面不进行整体刷新，本质上是改变window.location属性

---

2. vue-router

vue-router是Vue.js官方的路由插件，和vue.js深度集成，使用于构建单页面应用。
官网：https://router.vuejs.org/zh/

映射关系：路由提供路径，路径和相应的组件映射

2.1 安装

由于路由是需要一直用到的，所以安装生产版

npm install vue-router --save

2.2 使用

1.导入路由

import VueRouter from 'vue-router'

2.Vue使用路由

Vue.use(VueRouter);

3.创建路由实例，传入路由配置

const