JavaScript 页面跳转、页面重定向
JavaScript 实现页面跳转重定向可以使用以下两种方法:
1. window.location.replace(“url”)
类似 HTTP 重定向
将地址替换成新 url,该方法通过指定 URL 替换当前缓存在历史里(客户端)的项目,因此当使用 replace 方法之后,你不能通过"前进"和"后退"来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用!
2. window.location.href=“url”
类似点击 a 标签的链接。
跳转到指定的 url。
例子:
// 类似 HTTP 重定向到菜鸟教程
window.location.replace("https://www.runoob.com");// 类似点击菜鸟教程的链接(a 标签)
window.location.href = "https://www.runoob.com";
3. window.history
window.history.forward():
forward() 方法可加载历史列表中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
window.history.go():
back() 方法可加载历史列表中的前一个 URL(如果存在)。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
window.history.go(number|URL) :
go() 方法可加载历史列表中的某个具体的页面。
该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。
4. vue跳转
1.在template中的常见写法:
<router-link to="/miniCard/statement/horizon"><button class="btn btn-default">点击跳转</button>
</router-link>
2.this.$router.go()
this.$router.go(1) //在浏览器记录中前进一步
this.$router.go(-1) //后退一步记录
this.$router.go(3) //前进三步记录
3.this.$router.push()
A:this.$router.push({ path: '/home', query: { site: '1111'} })
query传参,用path属性对应跳转路径,类似于get提交,参数是在路径里显示的。
子页面接收时 var cityId = this.$route.query.cityId
B:this.$router.push({ name: 'Home', params: { site: '2222'} })
params传参,用name属性对应跳转路径,类似于post提交,参数不会出现在跳转路径里。
子页面接收时 var cityId = this.$route.params.cityId
两个同级页面,用query传参。A通过路由带参跳转到B页面,然后通过参数过滤掉B页面的一些数据。之后刷新B页面,由于参数是在路径里的,还是过滤掉的数据,这个时候要么在B页面入口进 入B页面,要么就得在页面再做处理才能符合需求,改用params之后就没这个问题了。
this.$router.replace()
用法同上
打开新的页面,不会像history添加新纪录,而是直接替换掉当前记录。点击返回,会跳转到上上一个页面。上一个记录是不存在的。
参考:
- 菜鸟教程
- https://www.cnblogs.com/congtt/p/10671512.html
JavaScript 页面跳转、页面重定向相关推荐
- 页面跳转与重定向(之一)
前言 html ,js 可以实现页面跳转. jsp , asp, php 也有各自页面跳转与重定向的方式. 下文针对js 和jsp 的页面跳转实现方式进行一个总结. html 页面跳转方式 可以使用h ...
- 页面跳转与重定向(之二)
前言 这一篇是接着上一篇的继续 页面跳转与重定向(之一) 在上一篇中, 介绍了在html,js 和JSP中如何跳转和重定向. 基本是在页面层级进行页面的跳转, 进入一个页面后跳入另一个页面. 这一篇将 ...
- html页面跳转实例,javascript如何跳转页面?
javascript如何跳转页面?下面本篇文章就来给大家介绍一下使用javascript跳转页面的几种方法,希望对大家有所帮助. 方法1:使用window.location.href方式进行跳转 该种 ...
- 在服务器网站上做跳转页面跳转页面,服务器怎么设置跳转页面跳转页面
服务器怎么设置跳转页面跳转页面 内容精选 换一换 接入配置完成后,伙伴可以在能力开放页面配置伙伴平台回跳地址,以便于客户在完成订单支付后能返回到伙伴销售平台或者客户支付订单需要充值时能从华为云跳到伙伴 ...
- [HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文)
原文地址为: [HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文) 要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种: ...
- springboot 直接转发调用_springboot-过滤器的页面跳转【重定向与请求转发】-异常报错...
springboot中,增加过滤器后,页面重定向跳转与请求转发跳转,都出现报错. 求大佬帮忙解答,谢谢! 一.页面跳转代码: 1.重定向代码: response.sendRedirect(" ...
- TP5的页面跳转与重定向
1.页面跳转的目标有哪些? 调用方法: $this->success('提示','地址'); $this->error('提示','地址'); index.php文件内容: <?ph ...
- JavaScript 登录跳转页面效果
要求: 有两个页面:index.html和login.html.在login.html页面中点击登录,会跳转到index.html,并将输入的用户名传递到index.html. 实现效果: 实现思路: ...
- JQuery实现页面跳转 页面跳转的七种方法
<mce:script type="text/javascript"><!-- $(function(){ var pn = $("#gotopagen ...
- php怎么返回html页面跳转页面,php怎么跳转到html
php跳转到html的方法:可以选择使用header()函数进行跳转,如[header("Location: http://www.xxxxx.com");].需要注意的是,在he ...
最新文章
- jupyter notebook 内核好像挂掉了
- 数据中心在2017年的愿望清单
- 使用tcpdump查看HTTP请求响应 详细信息 数据
- 一些Java面试技巧分享,你不能错过!
- Oracle 11gR2 RAC 中的 Grid Plug and Play(GPnP) 是什么?
- maven error: element dependency can not have character children
- 01-python进阶-拾遗
- bzoj 1049: [HAOI2006]数字序列(DP+DP)
- Exadata中最有用的功能-存储索引
- smale学习之数学表达式(day4)
- android修改屏幕比例,安卓屏幕比例修改器
- Cisco路由器的命令配置教程详解
- 计算机系统时间无法更改,Win7电脑无法修改系统时间如何解决?
- 周云蓬献唱《杜甫三章》实证“把古人唱成亲人”
- 来给罗永浩和王自如打个分(上)
- ios html转换成网页,ios App加载本地HTML网页,点击网页链接跳转到app页面的方法
- 神经网络预测结果分析,神经网络怎么预测数据
- 阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
- java发送图片邮件_使用javamail发送包含图片的html格式邮件详解
- tpc ds mysql_tpc-ds测试tidb结果