JavaScirpt-location,historylocationlocation值描述href返回浏览器地址栏的整

学习VueRouter源码中遇到了许多location,history(出了几个新Api)相关的知识点，生疏很多，用笔记的方式在来巩固一小点知识点。在熟悉组件结构的时候，要巩固好底层知识，这样就更容易读懂别人的思想。

location

Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。浏览器地址栏上的链接。

location	值描述
href	返回浏览器地址栏的整条url
protocol	返回连接对应的协议如 'http','https'
host	包含了域名一个，有可能会附带':' 端口号
hostname	返回域名
port	返回端口号
pathname	以第一个'/' 结束于第一个'?' 之间的内容
search	以第一个'?' 结束于第一个'#' 之间的内容
hash	第一个'#'之后的所有内容
origin	页面来源的标准形式结果： protocol + host
assgin()	传入一个URL地址，进行跳转。当前窗口覆盖(保留会话地址，可以后退)
reload()	传入一个布尔值，默认false。 true: 一定从服务器上加载数据，false：可能从浏览器缓存中获取
replace()	传入一个URL地址替换当前的资源，不会保存会话地址，也就是无法后退。

url案例

    let url = document.createElement("a");
    url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
    console.log(url.href) // 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container'
    console.log(url.protocol) // 'https:'
    console.log(url.host) // 'developer.mozilla.org'
    console.log(url.hostname) // 'developer.mozilla.org'
    console.log(url.port) //  ''
    console.log(url.pathname) // '/en-US/search'
    console.log(url.search) // '?q=URL'
    console.log(url.hash) // '#search-results-close-container'
    console.log(url.origin) // 'https://developer.mozilla.org'

history

对浏览器会话历史的访问，在新api中可以浏览器无刷新变动URL地址。

history	值描述
scrollRestoration	页面scroll的位置轨迹。默认 'auto' 自动保留滚动轨迹， 'manual' 需要手动保留
length	历史堆栈中页面的数量
back()	回退浏览器会话记录
forward()	前进浏览器会话记录
go()	传入一个数值参数，前进(正数)或者后退(负数)，可进行多页操作
pushState()	传入3个参数，一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL，并不会导致浏览器加载其路径，也不会检查是否存在。
replaceState()	同上，但是不会保存会话记录

pushState

参数对应的描述
第一个参数：状态对象 通过pushState创建新的历史记录条，无论用户导航到新的状态，popstate事件就会触发。且该事件的state属性包含该历史记录条目对象的副本,会序列化状态对象，且不超过640K，否则抛出异常。
第二个参数：标题，可以忽略，传一个null 
第三个参数：URL,该参数定义了新的URL历史记录，新的URL必须同源，否则抛出异常。 
浏览器保存会话记录

replaceState

同上，只不过不会保存会话记录。

popstate，hashchange事件例子

使用popstate,hashchange 事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History新APi使用</title>
</head>
<body>
<div>
    <button id="pageBar">页面一（bar.html）</button>
    <button id="pageFoo">页面二（foo.html）</button>
    <button id="pageHashBar">hash路径页面一（#/bar.html）</button>
    <button id="pageHashFoo">hash路径页面二（#/foo.html）</button>
</div>
</body>
</html>
<script>
    // 列举当前页面初始换路径 http://localhost:63342/html/History.html
    function $id(id) {
        return document.getElementById(id);
    }

    function pushState(state, title, url) {
        window.history.pushState(state, title, url);
    }

    let pageBar = $id("pageBar");
    let pageFoo = $id("pageFoo");

    let pageHashBar = $id("pageHashBar");
    let pageHashFoo = $id("pageHashFoo");
    // 非hash
    // 触发之后 http://localhost:63342/bar.html || http://localhost:63342/foo.html
    pageBar.onclick = function () {
        pushState({
            data: 'bar'
        }, null, 'bar.html')
    };
    pageFoo.onclick = function () {
        pushState({
            data: 'foo'
        }, null, 'foo.html')
    };
    // hash路径
    // 触发之后 http://localhost:63342/html/History.html#/bar.html || http://localhost:63342/html/History.html#/bar.html
    pageHashBar.onclick = function () {
        pushState({
            data: 'bar'
        }, null, '#/bar.html')
    };
    pageHashFoo.onclick = function () {
        pushState({
            data: 'foo'
        }, null, '#/foo.html')
    };
    // 在使用过程中需要注意前缀  在有'/'情况下，直接替换所有路径，没有'/' 在当前目录替换
    // 在操作浏览器会话记录的时候 监听事件生效
    // 二中路径都会触发
    window.addEventListener('popstate', function (e) {
        console.log('popstate');
    });
    // 只有hash 路径会触发
    window.addEventListener('hashchange', function (e) {
        console.log('hashchange');
    })
</script>