Vue Router 的路由模式 hash 和 history 的原理及区别

hash模式的实现原理
早期前端路由是基于location.hash来实现的，location.hash的值就是URL中#后面的内容，eg：www.word.com#search，它后面的location.hash的值为#search。
hash路由模式的实现主要基于下面几个特性：

URL中hash值只是客户端的一种状态，当向服务器发送请求时，hash部分不会被发送；

hash值发生变化时，会在浏览器访问历史中增加一条记录；

可以通过a标签的href属性修改hash，也可通过给location.hash赋值修改；

使用hashchange事件监听hash值变化，从而对页面进行跳转（渲染）。

history模式的实现原理
HTML5提供History API来实现URL变化，history.pushState和history.replaceState，前者新增一条历史记录，后者直接替换当前历史记录。
history路由模式的实现主要基于下面几个特性：

pushState和replaceState来操作实现URL变化；

使用popstate事件监听URL变化，从而对页面进行跳转（渲染）；

history.pushState()和history.replaceState()不触发popstate，需手动出发。

history问题
history模式需要后台配置支持。若后台没有正确的配置，用户直接访问就会返回404。故需在服务端增加一个覆盖左右情况的候选资源，返回index.html，就是app依赖的页面。
官方文档：router.vuejs.org/zh/guide/es…
简单实现Vue Router
Vue Router核心是通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的世界，根据router对象匹配相应路由，获取组件，并渲染组件到视图上。

如何在install方法中获取Vue实例上的router属性
利用Vue.mixin混入声明周期函数beforeCreate，在beforeCreate函数中可以获取Vue实例上的属性并复制到Vue原型链上。
_Vue.mixin({
beforeCreate(){
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …_Vue.prototype.router = this.$options.router } }})
复制代码

如何触发更新
hash模式：

通过location.hash修改hash，触发更新；

通过监听hashchange事件监听浏览器前进或后退，触发更新。

history模式：

通过history.pushState修改浏览器地址，触发更新；

通过监听popstate事件监听浏览器前进或后退，触发更新。