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

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

hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实基本原理很简单，location.hash 的值就是URL中#后面的内容，比如下面这个网站，他的location.hash的值为#search:
https://www.word.com#search
早期的前端路由的实现就是基于 location.hash 来实现的。其实基本原理很简单，location.hash 的值就是URL中#后面的内容，比如下面这个网站，他的location.hash的值为#hash

https://www.text.com#hash

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

1. URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送
2. Hash值的改变，都会在浏览器访问历史中增加一个记录，因此我们能通过浏览器的回退、前进控制按钮控制hash的切换
3. 可以通过a标签。并设置href属性，当用户点击这个标签后，URL的hash值会发生改变；或者我们可以用javascript来对loaction.hash进行赋值，改变URL的hash值
4. 我们可以使用hashchange事件来监听hash值的变化，从而对页面进行跳转(渲染)

history模式的实现原理

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

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

history路由模式的实现主要基于存在下面几个特性

1. pushState和repalceState两个API来操作实现URL的变化
2. 我们可以使用popstate事件来监听URL的变化，从而对页面进行跳转(渲染)
3. History.pushState()或history.replaceState()不会触发popstate事件，这时我们需要手动出发页面跳转(渲染)

history的问题

History路由模式要后台配置支持,因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://text.com/user 就会返回404,所以，要在服务器增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你app依赖的页面
具体的服务端配置方式可以参考Vue Router官方说明
https://router.vuejs.org/zh/guide/essentials/history-mode.html

简单实现Vue Router

Vue Router核心是，通过Vue.use注册插件，在插件的install 方法中获取用户配置的router对象。当浏览器地址发生变化的时候，根据router对象匹配相应的路由，获取组件，并将组件渲染到视图上。

如何在install方法中获取Vue实例上的router属性

可以利用Vue.mixin混入声明周期函数beforeCreate,在berforeCreate函数中可以获取到Vue实例上的属性并赋值到Vue原型链上

_Vue.mixin({
	beforeCreated(){
	  If(this.$options.router){
		_Vue.prototype.$router = this.$options.router
	}
  }
})

如何触发更新

Hash模式下

1. 通过location.hash修改hash值，触发更新
2. 通过监听hashchange事件监听浏览器前进或者后退，触发更新

History模式下

1. 通过history.pushState 修改浏览器地址，触发更新
2. 通过监听popstate事件监听浏览器前进或者后退，触发更新

如何渲染router-view组件

1. 通过Vue.observable在router实例上创建一个保存当前路由的监控对象current
2. 当浏览器地址变化的时候，修改监控对象current
3. 在router-view组件中监听监控对象、current的变化，当current变化后，获取用户注册的相应component,并利用h函数将component渲染成vnodes,进而更新页面视图