JS BOM篇（二）location对象与history对象

location 对象

js">location 是最有用的对象之一。
1.提供了与当前窗口中加载的文档有关的信息，
2.提供了导航功能。
3.即是window对象的属性，也是document对象的属性。
	即（window.location = document.location）

属性列表

属性名	例子	说明
hash	“#content”	返回URl中的hash（#号后跟0或多个字符），如果不包括散列，则返回空字符
host	“www.jsk.com:80”	返回服务器名称和端口号（如果有）
hostname	“www.jsk.com”	返回不带端口号的服务器名称
href	“http://www.jsk.com:80/md?articleId=1”	返回当前加载页面的完整URL。location对象的toString()方法也返回这个值
pathname	“/md”	返回URL中的目录和文件名
port	“8080”	返回端口号，如果没有返回空
protocol	“http:”	返回页面使用的协议
search	“?articleId=1”	返回URL的查询字符串，以？开头

查询字符串参数

js">//查询字符串参数
  function getQueryArr(){
    let qs= location.search.length>0? location.search.slice(1):''
    let args = {},
    item = null;
    
    arr = qs.length>0?qs.split('&'):[]
    for (let i = 0; i < arr.length; i++) {
      item = arr[i].split('=')
      let name = decodeURIComponent(item[0])
      let value = decodeURIComponent(item[1])
      if (name.length) {
        args[name] = value
      }
    }
    return args
  }
  console.log(getQueryArr());

方法

方法名	例子	说明
assign	location.assign(“http://www.jsk.com”)	立即打开并生成一条记录
replace	location.replace(“http://www.jsk.com”)	不会在历史记录中生成新记录，不能回到前一个页面
reload	location.reload()	重新加载（有可能能从缓存中加载），如果传递参数true 从服务器重新加载

注意
以下三种方式相同

js">location.assign('http://www.jsk.com')
location.href = 'http://www.jsk.com'
window.location = 'http://www.jsk.com'

history对象

方法

方法名	例子	说明
go	history.go(-1)	正数向前n页负数向后退n页如果是string，寻找最近的含有相似字符的页面地址
forward	history.forward()	前进一页
back	history.back()	后退一页

vue 的路由跳转以及传参由这些api实现