前端页面跳转、刷新
一、location.href的用法
let url = "www.baidu.com";1、当前页面打开url页面
self.location.href="url";
// 等同于
this.location.href="url";
window.location.href="url";
location.href="url"; 2、在父窗口打开此url窗口
parent.location.href="url";3、在顶层页面打开url（跳出框架）
top.location.href="url";4、附1：刷新当前页面
- Ⅰ、
window.location.href=window.location.href有提交数据时，则是向指定的url提交数据 - Ⅱ、
window.location.Reload()，有提交数据时，会提示是否提交 - Ⅲ、
window.location.replace()可以导向另外一个URL
案例说明：
如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe
D中的js：
"window.location.href"、"location.href"：D页面跳转
"parent.location.href"：C页面跳转
"top.location.href"：A页面跳转
D页面中有form：
<form>: form提交后D页面跳转
<form target="_blank">: form提交后弹出新页面
<form target="_parent">: form提交后C页面跳转
<form target="_top"> : form提交后A页面跳转页面刷新，D 页面：
"parent.location.reload()": C页面刷新 （也可以使用子窗口的 opener 对象来获得父窗口的对象: window.opener.document.location.reload()）
"top.location.reload()": A页面刷新
5、window.location.replace和window.location.href区别
当在微信公总号中 点击手机系统自带的默认返回按钮时：页面直接退出了公众号而不是返回到上一页， 是因为，跳转当前页的时候没有记录历史路由，用的是window.location.replace，而不是window.location.href或者vue-router
有3个页面 a,b,c，如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c
- Ⅰ：b->c 是通过window.location.replace("..xx/c") 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面）可以用来刷新页面
- Ⅱ：b->c是通过window.location.href("..xx/c") 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面
两者的区别: 两者后退时所回退的页面不一样
6、附2：自动刷新(HTML实现)
页面自动刷新：把如下代码加入<head>区域中
<!-- 2指每隔2秒刷新一次页面 -->
`<meta http-equiv="refresh" content="2">`页面自动跳转：把如下代码加入<head>区域中
<!-- 2指隔2秒后跳转到`http://www.baidu.com`页面 -->
`<meta http-equiv="refresh" content="2;url=http://www.baidu.com">`二、window.open的用法
1、语法：
window.open(strUrl, strWindowName, [strWindowFeatures])
strUrl：要在新打开的窗口中加载的URL。
strWindowName：新窗口的名称。
可选的参数如下
_blank：打开一个新的标签页。这个是默认值_parent：父页面打开_self：当期页面打开_top：顶层页面打开name：窗口名称
strWindowFeatures：这是一个可选参数，列出新窗口的特征。
2、Location.href属性与window.open()方法的区别：
Location.href属性是对当前浏览器窗口的URL地址对象的参考；window.open()方法打开一个新的窗口。Location.href属性一般用于页面的迭代，也就是重新定位当前页window.open()方法可以通过新开窗口或者说新开标签页打开一个网址，而location.href属性只能在当前页打开一个网址。
3、附：返回页面
window.history.back(); // 返回到上一页（在当前窗口 ）
window.history.go(-1);三、navigate
【说明】：navigate的效果是在当前页面直接跳转至指定路由，当前页面会被覆盖掉，而且不会对跳转后的页面数据进行刷新，也就是说，跳转后的页面显示的还是旧数据。
假设指定需要跳转的目标路由是“/class/student”。
this.router.navigate(['/class/student'])四、document.getElementById("a标签id").click();
【说明】：这种方式的效果是执行代码自动触发html中id为openStudent的a标签中的链接，进而跳转进入指定页面，这样就不用手动点击a标签的链接进入指定页面。
假设指定需要跳转的目标路由是“/class/student”。
document.getElementById("openStudent").click();五、routerLink
【说明】：a标签中使用[routerLink]，手动点击a标签中的链接，[routerLink]的效果是另外打开一个页面，在新页面中进入指定路由“/class/student”并且会刷新页面数据，而不是在当前页面直接跳转至指定路由，如果路由“/class/student”已经在其他页面打开，那么[routerLink]会直接跳转至路由“/class/student”对应的页面，但不会刷新页面数据。
假设指定需要跳转的目标路由是“/class/student”。
<a class="btn " appClick [target]='"blank"' [routerLink]='/class/student' ><span id="openStudent">进入学生信息界面</span></a>routerLink的几种写法：
- (1).[routerLink]='/class/student'：斜杠开头表示使用绝对路径进行路由导航；
- (2).[routerLink]='../student'：两个点开头表示相对于父路径进行路由导航；
- (3).[routerLink]='./student'：一个点开头表示相对于当前路径进行路由导航。
