Vue Router 的路由模式 hash 和 history 的实现原理？
简单区别： hash 模式 url 带 # 号，history则不带
具体点：hash 和history路由模式的几个特性，再简单讲讲怎么在install方法中获取 Vue 实例上的router属性，怎么触发更新
1.hash模式的实现原理
早期的前端路由的实现就是基于location.hash来实现的，其实原理很简单，location.hash的值就是URL中 # 后面的内容， 比如下面这个网站，它的localtion.hash的值为 #search
const url = 'http://blog.yydream.top#search'
hash路由模式的实现主要是基于下面几个特性：
- URL中
hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被 发送 hash值得改变，都会在浏览器的访问历史中增加一个记录，因为我们能通过浏览器的回退，前进控制hash的切换- 可以通过
a标签，并设置href属性，当用户点击这个标签后，URL的hash值会发生改变，或者使用javascript来对location.hash进行赋值，改变URL的hash值 - 可以使用
hashchange事件来监听hash值的变化，从而对页面进行跳转（渲染）
2.history模式的实现原理
HTML5提供了History API来实现URL的变化，其中最主要的API有以下两个：
history.pushState()和history.replaceState()
上面的两个API可以在不进行刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
history路由模式的实现主要基于存在下面几个特性：
pushState和replaceState两个API来操作实现URL的变化- 我们可以使用
popstate事件来监听URL的变化，从而对页面进行跳转（渲染） history.pushState()或history.replaceState()不会触发popstate事件，这时我们需要手动触发页面跳转（渲染）
3.history的问题
history路由模式虽然好看，但是这种模式要玩好，还需要后台配置支持，因为哦们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问http://blog.yydream.top/article/id就会返回404，这就不好看了。
所以呢，你要在服务器增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。
具体的服务器端配置方式可以参考Vue Router官方说明文档：router.vuejs.org/zh/guide/es…
4.简单实现Vue Router
Vue Router核心是通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象，当浏览器地址发生变化的时候，根据router对象匹配相应路由，获取组件，并将组件渲染到视图上。
(1) 如何在 install 方法中获取Vue实例上的router属性
可以利用Vue.mixin混入声明周期函数beforeCreate，在beforeCreate函数中可以获取到Vue实例上的属性并赋值到Vue原型链上。
_Vue.mixin({
beforeCreate() {
if (this.$options.router) {
_Vue.prototype.$router = this.$options.router;
}
}
})
(2)如何触发更新
hash 模式下：
-
通过
location.hash修改hash值，触发更新 -
通过监听
hashchange事件监听浏览器前进或者后退，触发更新
history模式下：
- 通过
hisoty.pushState修改浏览器地址，触发更新 - 通过监听
popstate事件监听浏览器前进或者后退，触发更新 - 如何渲染
router-view组件 - 通过
Vue.observable在router实例上创建一个保存当前路由的监控对象current - 当浏览器地址变化的时候，修改监控对象
current - 在
router-view组件中监听监控对象current的变化，当current变化后，获取用户注册的响应component，并利用h函数将component渲染成vnodes，进而更新页面视图
