我们知道vue项目一般都是SPA 单页应用。那么什么是单页应用呢？多页应用又是什么呢？

历史：

1.多页应用（后端路由）：服务端返回页面

用户请求url导航到具体的html页面。每次跳转不同的url都会访问服务端，然后服务端返回页面，

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

缺点：

每次都请求，网络延迟，用户体验不好
前端后没有分离，前端需要在后端开发，开发效率低下

2. 单页应用SPA（前端路由）：更新视图而不重新请求页面

核心：更新视图而不重新请求页面

vue 的单页面应用却能模拟出多页面应用效果，主要归功于前端路由机制。

前端路由机制有2种模式：他们都是浏览器自身的特性，而vue-router就是利用这两个特性实现前端路由的

1.Hash 哈希模式

带有#号，比如a链接跳转会刷新页面，但是请求头url上不会带上#号后面的路由
监听onhashchange事件

缺点：vue 项目携带#号会对开发造成一定的影响
- 微信第三方登录回调地址，有#号时，接受不到code参数
- 微信H5支付的回到地址，不允许带有#号
- App分享，处理特殊字符时，会对#进行编译
- 影响美观

缺点：带#号影响美观，后端想要追踪路由追踪不到，微信的一些支付分享等app会有问题,锚点功能会跟路由冲突
但是他比较简单，不需要服务端任何的设置和开发

2.History模式也就是H5模式

1. html4 historyAPI

history.forward() ：前进一步
history.go(n) ：后退n
history.back()：后退一步

2. html5 historyAPI

html5 中window.history对象得到了扩展，新增以下API

history.pushState（data,title,url）：向历史中追加一条记录
history.replaceState() ：替换当前页在历史记录中的信息
history.state 属性：得到当前页的state信息
history.onpopState事件：点击浏览器的后退按钮或者js调用html4的api时触发，监听函数可传入一个event对象，event.state 就是传入的data参数

调用pushState 和replaceState 不会触发onpopState事件

history.pushState({page:1},'页面1','?page=1');
history.pushState({page:2},'页面2','?page=2');
    
history.back(); //浏览器后退 触发了onpopstate

window.addEventListener('popstate',(e)=>{
    console.log(e.state)
})

限制：history模式需要服务端的支持

vue-router 的mode 改为history时，就是h5模式，但是这时候必须要在nginx里配置 try_files $uri $uri/ /index.html 否则页面刷新后是404 或者空白，这是由于服务端不识别vue的路由配置，所以在遇到404的情况下，要返回index.hrml,让vue自己去寻找自己的路由页面

vue-router 实现原理：前端路由机制

历史：