1. vue-router是干什么的？

        vue-router是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起 url和页面之间的映射关系。

2. vue-router原理是什么？

        ”更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

（1）利用 URL 中的 hash（“#”）

（2）利用 history interface 在 HTML5 中新增的方法

2.1 hash 模式的实现原理

        vue-router 默认是 hash 模式，主要是 hashHistory

        早期的前端路由的实现就是基于 location.hash 来实现的，原理很简单：location.hash 的值就是 URL 中 #后面 的内容，比如 https://www.taobao.com#search，它的 location.hash 的值就是 ‘#search’

        主要特征如下：

        hash 值是 URL 的锚点，只是客户端的一种状态，不会重新加载页面，也就是说当向服务器发出请求时，hash 部分不会被发送；

        hash 锚点变化只是浏览器的行为，都会在浏览器的访问历史中增加一条记录，因此我们可以通过浏览器的后退按钮回到上一个位置；

        hash 模式通过锚点值的变化，根据不同的值，渲染指定 DOM 位置的不同数据；

        hash 模式的原理是通过 hashchange 事件来监听 hash 值的变化【window.addEventListener("hashchange", callback, false) 】

2.2 history 模式的实现原理

       主要利用 HTML5 History 新增的 pushState() 和 replaceState() 两个方法来修改历史记录。

        主要特征如下：

        pushState() 和 replaceState()两个方法来实现操作 URL 的变化，虽然当前 URL 改变了，但浏览器不会立即发送请求该 URL，这就满足单页面应用“更新视图单不重新请求页面”的需求；

        pushState() 是新增一条记录记录，replaceState() 是直接替换当前的历史记录；

        修改浏览器历史记录会触发 popstate 事件，pushState() 和 replaceState()并不会触发popstate 事件，这时需要我们手动触发页面的跳转（渲染）；

        当刷新页面的时候会走后端路由，所以需要服务端的辅助来完成

2.3 abstract 模式的实现原理

        服务端下使用，不涉及和浏览器地址的相关记录；

        流程和 hash 模式一样，通过数组维护模拟浏览器的历史记录栈；

        使用一个不依赖浏览器的浏览器历史虚拟管理后台

2.4 hash 和 history 模式的比较和选择

        设置模式，默认是 hash 模式，通过 mode参数，mode: 'history' 设置为 history 模式

        浏览器支持度，hash 模式甚至能兼容低版本的 IE 浏览器

        hash 模式下 url 带 # ，会显得不是很美观

        HTML5History 的 pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；而HashHistory 的 hash 只可修改#后面的部分，故只可设置与当前同文档的 URL

        pushState 通过 stateObject 可以添加任意类型的数据到记录中，而 hash 只可添加短字符串

        pushState设置的新url和当前url相同时也会把记录添加进记录栈中，而hash只有新的和当前的不同的时候才会添加到栈中

        history 模式需要服务端的支持，hash 模式不需要