hash模式和history模式对比

功能：vue项目是单页面应用，仅存在一个html物理文件，通过路由系统可以将项目的组件与可访问的url路径进行绑定，切换页面时既需要让访问的url路径变化，又不能触发html物理文件的重新加载

直观区别：对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。

hash模式：

在调试窗口输入Window.loacation（包含了浏览器地址栏的地址信息）可以看到hash的变化，中文没法正常显示

hash模式是观察window.location.hash的变化来改变路由的。

纯静态技术，路由的哈希模式其实是利用了window.onhashchange事件，也就是哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，通知触发函数，实现快速的dom组件的切换

匹配路径，找对应的组件，找到以后把它添加到dom里面，或者display显示或者隐藏

缺点：分布式项目（每个人写一个项目，网页部署在不同的服务器上，一个url路径只能有一个#）

history模式：

底层：利用history本身的pushState()重写url路径

利用点击事件中history的pushState重写页面路径，重写完之后再去加载dom对象

缺点：

对于单页面应用，history确实会跳转到对应的响应式页面，同时路由url也会变化，但是当刷新时，重新向服务器请求数据，会出现404。

原因是服务器找不到对应的文件。

vueCli开发模式已经解决了这个问题，但是到生产模式中会出现问题。

那么如何解决呢？这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html）。