大家好，又见面了，我是你们的朋友全栈君。
了解vue-router原理中更新URL但不重载页面
原理之一location.hash
1.存在形式及意义
一般情况下为URL后 “#” 及其后面一部分组成，如http://www.test.com/#/something，
其中http://www.test.com为真实的路径，而#/something则为网页中的位置，称之为锚点
在访问锚点时会自动跳刀锚点所在的网页位置，通常有两种方式作为锚点
<a name=”something”></a>
<element id=”something”></element>
以上两种均可通过http://www.test.com/#/something使页面滚动到该元素的位置
2.hash的读写
location.hash可读可写的
//当前URL为http://www.test.com/#/something
location.hash; //输出 #/something
location.hash = '#/test1'; //http://www.test.com/#/test1,并且会新增一条历史记录在对hash写时有个需要注意的地方，如下所示
//当前URL为http://www.test.com/
location.hash = "#/test" //http://www.test.com/#/test
locationl.hash = "/#/test" //http://www.test.com/#/#/test当写入第一个字符不为为 “#” 时会自动生成一个 “#” 在字符串之前，再把字符串追加到生成的#后面
这样会造成有两个#,此时location.hash输出 “#/#/test”
3.onhashchange事件
在hash值发生变化时会触发该事件
window.onhashchange = function(e){
console.log(e);
}总结：
location.hash与HTML5 history类似，都能够在改变页面的URL而不会引起浏览器的重载
但是location.hash支持比较早的浏览器，而history是在HTML5的新API，可能某些较早的浏览器不支持
因此在vue-router中对此做了两种模式，即history模式与hash模式可以适应不同的浏览器
具体解释之后更新vue-router的原理分析
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/158355.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
