location.hash？window.location.href和window.location.hash的区别
大家好，关于location.hash很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于window.location.href和window.location.hash的区别的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
vue-router中history和hash两种模式的区别的区别
说到hash和history的区别，最直观的就是在url中， hash带了#，history没有#，它们两个是路由配置mode的两个选项。
前端路由的核心是在改变视图的同时不会向后端发出请求，浏览器提供的这两种支持就是为了达到这一目的。
1.hash------就是指url中#号以及后面的字符
①hash也称作锚点，其中的#和css里面的#是一个意义，它本身是用来做页面定位的，可以是对应的id元素显示在可视区域内。
②我们可以通过 window.location.hash获取hash值
③hash中有一个 hashchange事件，当hash值发生变化时会触发这个事件，语法是： window.onhashchange=person 或者 <body onhashchange='person'>,这个事件会覆盖现有的事件处理程序，如果在想要添加一个新的事件处理程序的前提下，还不会覆盖原有的事件处理程序，可以通过' addEventListener'
另外hashchange事件有两个属性：
④地址栏url中的#符号，比如：http://www.jd.com/#/a,hash... 它的特点在于#/a虽然在url中，但不会被包括在http请求中，对后端完全没有影响，因此改变hash并不会导致页面的重新加载。
2.history------它直接指向History对象，它表示当前窗口的浏览历史，History对象保存了当前窗口访问过的所有页面网址
①history.length属性保存着历史记录的url数量，初始值是 1，如果当前窗口访问了四个网址，那么history.length=4
②可以在浏览器历史之间移动
go()接收一个整数为参数，移动到该整数指定的页面，比如 history.go(1)相当于 history.forward(),history.go(-1)相当于 history.back(),history.go(0)相当于刷新当前页面
back()移动到上一个访问页面，等同于浏览器的后退键,常见的返回上一页就可以用back()，是从浏览器缓存中加载，而不是重新要求服务器发送新的网页
forward()移动到下一个访问页面，等同于浏览器的前进键
③history.pushState()------在浏览器中添加历史记录，这个方法不会触发页面刷新，只是导致了history对象发生变化，地址栏会有反应。它有三个参数：
state:一个与指定网址相关的状态对象， popState事件触发时，该对象会传入回调函数，如果不需要这个对象，此处可填null
title:新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
url:新的网址，必须与当前页面处在同一个域，浏览器的地址栏将显示这个网址
如果pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashChange事件，如果设置了一个跨域网址，则会报错。
④history.replaceState()------这个方法的参数和pushState()方法一摸一样，区别是它修改浏览器历史当中的记录
⑤history.state返回当前页面的state对象
⑥每当同一个文档的浏览历史（即history）出现变化时，就会触发popState事件
仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发。另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发
使用的时候，可以为popState事件指定回调函数，回调函数的参数是一个event事件对象，它的 state属性指向pushState和replaceState方法为当前url所提供的状态对象（即这两个方法的第一个参数）。
⑦history.scrollRestoration='manual';关闭浏览器自动滚动行为
history.scrollRestoration='auto';打开浏览器自动滚动行为(默认)
一般场景下，hash和history都可以使用
history
①优点：如果你更在意颜值，那么就使用没有#的history模式，这种模式充分利用history.pushState API来完成url的跳转，而且不需要重新加载页面，通过pushState()设置的url可以是和当前url同源的任意url，甚至可以与当前url一模一样,它通过stateObject参数可以添加任意类型的数据到记录中，它还可以额外设置title属性，提供给后续使用。利用pushState和replaceState方法，对历史记录进行修改
缺点：就是如果通过url向后端发起请求时，尤其是在用户手动输入url回车或者重新刷新（重启）浏览器的时候，会报404错误，找不到指定路由，需要后端去指向正确的路由匹配,比如当url不匹配时跳转到index.html，虽然通过以上两种方法改变了当前的url，但是浏览器不会立即向后端发送请求
hash
②优点：回车刷新可以加载到hash值对应的页面，并且支持低版本浏览器和IE浏览器，#/a虽然在url中，但不会被包括在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
缺点：hash设置的新值必须与原来的不一样才会出发动作并且将记录添加到栈中，它只可以修改#后面的部分，所以只能设置与当前url同文档的url，只有短字符串才可以添加到记录中
window.location.href和window.location.hash的区别
（1）window.location.href
得到和使用的是完整的url，比如window.location.rel="external nofollow" href="www.baidu.com”表示的是重新定向，页面跳转
到新的页面。也可以通过window.location.href得到a标签的完整的href，比如<a rel="external nofollow" href="#book">如果使用href，那
么可以得到完整的链接（url）
（2）window.location.hash
得到的是锚链接。相比如href,通过window.location.hash并不会跳转到新的链接，只会在当前链接里面
改变锚链。并且如果有<a rel="external nofollow" href="#book">通过window.location.hash得不到完整的链接（URL），仅仅得到#book.
javascript的location用法
1.location地址对象描述的是某一个窗口对象所打开的地址。表示当前窗口的地址，只需使用“location”就行；若要表示某一个窗口的地址，就使用“<窗口对象>.location”。具体如下：
第一、location属性、用法以及相关示例：
Location包含了关于当前 URL的信息。location对象描述了与一个给定的 Window对象
关联的完整 URL。location对象的每个属性都描述了 URL的不同特性。
2.属性概览
protocol返回地址的协议，取值为'http:','https:','file:'等等。
hostname返回地址的主机名，例如，一个“
http://www.microsoft.com/china/”的地址，location.hostname==
'www.microsoft.com'。
· port返回地址的端口号，一般 http的端口号是'80'。
· host返回主机名和端口号，如：'www.a.com:8080'。
· pathname返回路径名，如“http://www.a.com/b/c.html”，
location.pathname=='b/c.html'。
· hash返回“#”以及以后的内容，如“
http://www.a.com/b/c.html#chapter4”，location.hash==
'#chapter4'；如果地址里没有“#”，则返回空字符串。
· search返回“?”以及以后的内容，如“
http://www.a.com/b/c.asp?selection=3&jumpto=4”，l ocation.search
=='?selection=3&jumpto=4'；可以使用
“location.href='...'”，也可以直接用“location='...'”来达
到此目的。
3.方法概览
reload()相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)
键。
replace()打开一个 URL，并取代历史对象中当前位置的地址。用这个方
法打开一个 URL后，按下浏览器的“后退”键将不能返回到刚才的页面。
location之页面跳转js如下：
//简单跳转
function gotoPage(url){
// eg. var url=
"newsview.html?catalogid="+catalogID+"&pageid="+pageid;
window.location= url;
}
//对location用法的升级，为单个页面传递参数
function goto_catalog(iCat){
if(iCat<=0){
top.location="../index.aspx";// top出去
} else{
window.location="../newsCat.aspx?catid="+iCat;
}
}
对指定框架进行跳转页面，
function goto_iframe(url){
parent.mainFrame.location="../index.aspx";//
// parent.document.getElementById("mainFrame").src=
"../index.aspx";// use dom to change page//同时我增加了dom的写法
}
//对指定框架进行跳转页面，因为
parent.iframename.location="../index.aspx";方法不能实行，主要是
"parent.iframename"中的iframename在js中被默认为节点，而不能把传递过
来的参数转换过来，用dom实现了该传递二个参数的框架跳转页面，
function goto_iframe(iframename,url){
parent.document.getElementById(iframename).src="../index.aspx";//
use dom to change page by iframeName
//}
//回到首页
function gohome(){
top.location="/index.aspx";
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！