Vue Router的路由模式 hash 和 history 的实现原理

1. hash 模式的实现原理：

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

hash 路由模式的实现主要是基于下面几个特点：

• URL 中的 hash 值只是客户端的一种状态，向服务端发送请求的时候，hash 部分不会被发送
• hash 值得改变会在浏览器的历史记增加访问记录，所以可以通过浏览器的回退、前进控制 hash 值的改变
• 可以通过 a 标签设置 href 值或者通过 js 给location.hash 赋值来改变 hash 值
• 可以通过hashchang 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）

2. history 模式的实现原理

HTML5提供了 history API 来实现 URL 的变化，其中最主要的 API 有以下两个：
history.pushState() 和 history.replaceState()。这两个API 可以在不刷新的情况下操作浏览器的历史记录，不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录：

windown.history.pushState(null, null, path)
windown.history.replaceState(null, null, path)

history 路由模式的实现主要是基于下面几个特点：

• 通过 pushState 和 replaceState 两个API 来操作实现 URL 的变化
• 可以通过 popstate 事假来监听 URL 的变化，从而对页面进行跳转（渲染）
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，需要手动触发页面跳转

history 的问题

需要后台配置支持。

3. 简单实现 Vue Router

Vue Router 的核心是通过 Vue.use 注册插件，在插件的 install 方法中获取用户配置的 router 对象，当浏览器地址发生变化时，根据 router 对象匹配相应路由，获取组件，并将组件渲染到试图上。
（1）如何在 install 方法中获取 vue 实例上的 router 属性
可以利用 Vue.mixin 混入声明周期函数 beforeCreate，在 beforeCreate 函数中可以获取到实例上的属性并赋值到 Vue 原型链上。

_Vue.mixin({
		beforeCreate () {
			if (this.$options.router) {
				_Vue.prototype.$router = this.$options.router
			  }
		}
	})