结合demo浅谈vue路由实现原理

本文结合demo浅谈vue路由的实现方式.
更新视图但不请求页面是路由的核心需求,目前在浏览器实现主要有2种方式.

1. 利用URL中的hash值

2. 利用html5的history方法

   hash方法基本实现路由基本原理
   URL中#及其后面的字符称之为hash,可通过window.location.hash属性读取

hash虽然出现在URL中,但是不会被包括在http请求中,对服务端无效,因此改变hash不会重新请求和加载页面,利用此点可实现基本路由操作.

监听hash改变事件:
window.onhashchange = function (e) {
console.log(e.oldURL, e.newURL);
var hash = location.hash.slice(1);
document.body.style.color = hash;
}
每一次改变hash值都会在浏览器中增加一个历史记录,可通过浏览器自带前进/后退按钮访问.
以上例子是通过监听hash值改变,获取hash值中的字符,进而改变html样式,实现hash基本路由的方法思想.

HTML5History
我们可以通过go() back() forward()的方法查看历史记录栈的方法,进行各种跳转操作,
从HTML5开始,history interface提供了2个新的方法 :pushState()和replaceState() 使得我们可以对浏览器历史记录栈进行修改:

history.replaceState(null,null,'');//最开始的状态，采用replace直接替换
$('#router').html('<p>nav</p>')
$('a').on('click',function(){
console.log(this.text)
var text = this.text;
$('#router').html('<p>'+ text +'</p>')
history.pushState(null,null,text);
})

例子中通过replaceState()方法对history记录栈进行清空,再用history.pushState()方法对url进行赋值.
这里需要对这两个方法的三个参数进行一下简要说明,
第一个参数 state :一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
第二个 title :新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
第三个 url :新的网址,必须和页面处在同一域内.URL中会显示这个值
例子中通过pushState()方法对url值进行赋值,但是并不会重新请求服务器,进而实现路由跳转的基础.

参考文献地址:https://segmentfault.com/a/1190000014822765
demo github:https://github.com/lwkk1994/vuerouter-principle