vue路由

路由需要实现的功能
1.改变url且不让浏览器向服务器发出请求；
2.监测 url 的变化；
3.截获 url 地址，并解析出需要的信息来匹配路由规则。

前端目前只有2种模式
1.hash模式(IE8)
用a标签或者window.location.hash设置哈希值。

window.addEventListener('hashchange', () => { // ... 具体逻辑 //比如如果hash值发生改变就执行加载函数，相当于进行跳转页面 })

详细示例代码
https://www.cnblogs.com/huanying2015/p/8047376.html

2.history模式(IE10)
为什么还要搞个 history 呢？
首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
最重要的一点：

如果不想要很丑的 hash，我们可以用路由的 history 模式

—— 引用自 vueRouter文档

History 模式是 HTML5 新推出的功能，主要使用 history.pushState 和 history.replaceState 改变 URL。
通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。
API

window.history.pushState(state, title, url) // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取 // title：标题，基本没用，一般传 null // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。 //如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/， //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/ window.history.replaceState(state, title, url) // 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录 window.addEventListener("popstate", function() { // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发 }); window.history.back() // 后退 window.history.forward() // 前进 window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

示例代码：https://blog.csdn.net/jx950915/article/details/80612691

两种模式对比
1.Hash 模式只可以更改 # 后面的内容，History 模式可以通过 API 设置任意的同源 URL
2.History 模式可以通过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串
3.Hash 模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候