说起vue-rouer，不得不提的一个概念是前端路由，要想深入理解前端路由，不得不了解路由、后端路由、前端路由和后端路由的区别、多页面应用、单页面应用这些概念。

一、捋一捋概念呀先

1、单页面应用与多页面应用

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css（非必须文件可以使用懒加载，缩短首屏渲染时间）。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多页面（MPA:Mult-page Application），就是指一个应用中有多个页面，页面跳转时是整页刷新。

---

2、路由

何为路由呢？通俗点就是网址，就是根据不同的 url 地址展示不同的内容或页面。而如何区分前端路由和后端路由，其实就是看把不同路由对应不同的内容或页面的任务掌握在前端还是后端手里。

前端路由，自然是把不通路由对应的不同内容掌握在前端，vue中的vue-router、angular的ngRouter、react的ReactRouter。前端路由出现在单页面应用中，页面中公共部分不变，只改变部分内容的使用。路由切换时根据不同的路由动态加载不同的组件。

后端路由就是该任务掌握在后端，见于多页面应用中。每次GET或者POST请求，在服务端有一个专门的正则配置列表，然后匹配到具体的路径之后，分发到不同的controller，进行各种操作，最后服务端将html或者数据返回给前端。

需要注意的是：

1、页面可以是服务端获取数据，然后和模板组合，返回HTML。也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。

2、每跳转到不同的URL，都是重新访问服务端

后端路由优点是：

页面直接在服务端渲染好返回给浏览器，不用等待前端加载任何js和css等就可以显示在页面上。

缺点是：

1、页面、数据、逻辑混为一谈，程序臃肿。

2、前端开发人员需要安装整套后台服务，甚至学习java等后台语言。

---

二、Vue-Router前端路由的两种模式

1、一种是利用url的hash，就是通常所说的锚点#，javascript通过hashChange事件来监听url的变化，IE7以下需要轮询。

比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

           2、另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，单页面并没有跳转。不过使用这种模式需要服务端支持，服务端在接收到所有请求后，都只想同一个html文件，不然会出现404。因此单页面应用只有一个html，整个网站的内容都在这一个html里，通过js来处理。

history 模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

 hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。