前端页面跳转

MoXinXueWEB

已于 2022-04-27 14:35:01 修改

阅读量8k

点赞数 5

分类专栏：功能文章标签：前端 javascript 开发语言

于 2022-03-30 16:11:05 首次发布

本文链接：https://blog.csdn.net/MoXinXueWEB/article/details/123849236

版权

功能专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端页面跳转、刷新

一、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’：一个点开头表示相对于当前路径进行路由导航。