路由处理

属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。

属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

参考:https://www.w3school.com.cn/jsref/dom_obj_location.asp

1、跳转链接 在当前窗口打开

window.location.href="http://www.baidu.com"   等价于    <a href="baidu.com" target="_self">go baidu</a>  //打开并保留记录  window.location.href获取当前链接
window.location.replace("http://www.baidu.com") //替换当前页面
window.location.onrald()//刷新当前所有资源
window.location.Refresh()//刷新未加载资源 保留缓存
window.location="/index.html" 切换路由

2、跳转链接 在新窗口打开

window.open("http://www.baidu.com")  等价于 <a href="baidu.com" target="_blank">go baidu</a>

3、跳转链接 返回上一页

window.history.back(-1);

4、跳转链接

self.location.href="baidu.com"
   self 指代当前窗口对象，属于window 最上层的对象。

    location.href 指的是某window对象的url的地址

    self.location.href 指当前窗口的url地址，去掉self默认为当前窗口的url地址，一般用于防止外部的引用

　top.location.href:为引用test.html页面url的父窗口对象的url

   如果你的网页地址是:http://www.a.com，别人的是http://www.b.com, 他在他的页面用iframe等框架引用你的http://www.a.com,
   那么你可以用:

if(top.location.href!=self.location.href){
       location.href="http://www.a.com";
}
 来转向你的页面,top指代的是主体窗口,这里top.location.href返回http://www.b.com;

http://www.b.com!=http://www.a.com,返回为真(true),则网页重定向到你的网页,做到防盗用的作用.

什么是BOM
DOM是一套操作HTML标签的API（接口/方法/属性）
BOM是一套操作浏览器的API（接口/方法/属性）

常见的BOM对象
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
Screen：代表用户的屏幕信息

let agent = window.navigator.userAgent;
    if(/chrome/i.test(agent)){
        alert("谷歌");
    }else if(/firefox/i.test(agent)){
        alert("火狐");
    }else if(/msie/i.test(agent)){
        alert("低级IE浏览器");
    }else if("ActiveXObject" in window){
        alert("低级IE浏览器");
    }

window.location.href;  //获取当前地址栏的地址
window.location.href = “http://www.baidu.com”; // 设置当前地址栏的地址
window.location.reload();  //刷新
window.location.reload(true);  //强制刷新

window.history.forword(); //上一步
 window.history.back();  //下一步
 window.history.go(0);  //接收参数 0   表示刷新当前页面
 window.history.go(2); //接收正整数  表示前进2个页面
 window.history.go(-2); //接收负整数  表示后退2个页面
##获取元素宽高的方法
1. getComputedStyle();
获取的宽高不包括边框和内边距
既可以获取行内宽高，也可以获取CSS设置的宽高
只能获取，不能设置
只支持IE9以上的浏览器
```JavaScript
let oDiv = document.querySelector("div");
let oStyle = getComputedStyle(oDiv);
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽

let oDiv = document.querySelector("div");
let oStyle = oDiv.currentStyle;
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽

let oDiv = document.querySelector("div");
console.log(oDiv.style.height);//获取高
console.log(oDiv.style.width);//获取宽

let oDiv = document.querySelector("div");
console.log(oDiv.offsetWidth );//获取宽
console.log(oDiv.offsetHeight);//获取高

参考:https://www.jianshu.com/p/eac7f9dc3b17

vue路由处理

 router.beforeEach(async(to, from, next) => {
    if(to.meta=="replace "){ //需要改为不缓存时
        next({ ...to, replace: true })
    }
})

// 退出登录
function logout() {
  router.replace({path: '/login'});
  location.reload();
}

//路由数组
console.log(this.router)//存储路由数组

参考链接:https://router.vuejs.org/zh/