JavaScript 地址信息与页面跳转及跳转传参

简介: JavaScript 地址信息与页面跳转及跳转传参

方法         

 描述
window.location.hostname               返回 web 主机的域名
window.location.pathname                返回当前页面的路径和文件名
window.location.port                         返回 web 主机的端口
window.location.protocol          返回所使用的 web 协议( http:  https: 
window.location.href                  返回当前页面的
console.log(window.location.hostname);
console.log(window.location.pathname);
console.log(window.location.port);
console.log(window.location.protocol);
console.log(window.location.href);
方法              描述
window.location.replace(‘URL’)          通过 location.replace 替换当前页面路径来实现页面跳转
window.location.assign(‘URL’)      通过 location.assign 加载新文档实现页面跳转
window.location.href = ‘URL’                 通过改变 location.href 来实现页面跳转 (常用)
<button onclick="isHref()">通过 href 跳转</button>
<button onclick="isReplace()">通过 replace 跳转</button>
<button onclick="isAssign()">通过 assign 跳转</button>
<script>
function isHref(){
window.location.href = 'http://www.baidu.com';
}
function isReplace(){
window.location.replace('http://www.baidu.com');
}
function isAssign(){
window.location.assign('http://www.baidu.com');
}
</script>

跳转传参(重点):

跳转传参指在页面跳转时,将部分数据拼接到 URL 路径上,一并跳转到另一个页面上。

<button onclick="isHref()">通过 href 跳转</button>
<script>
let id = 10;
function isHref(){
window.location.href = 'index.html?'+id;
}
</script>

另一页面可以通过 window.location.search 接收此参数。并配合 slice 将多余符号切割掉。

<script>
console.log(window.location.search); // ?10 需要将?切割掉
console.log(window.location.search.slice(1)); // 10
</script>
目录
相关文章
|
2月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
13天前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
31 0
|
2月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
2月前
|
自然语言处理 JavaScript 前端开发
【走向世界】Vue.js国际化:打造无国界应用,让爱与信息跨越语言的边界!
【8月更文挑战第30天】本文详细介绍了Vue.js中实现国际化的多种方法及最佳实践。通过使用`vue-i18n`等第三方库,开发者能够轻松地为应用添加多语言支持,优化用户体验并扩大市场覆盖范围。文章涵盖从基本配置、动态加载语言包到考虑文化差异等方面的内容,帮助读者构建真正全球化且无缝多语言体验的应用程序。
65 0
|
2月前
|
JavaScript
js怎样控制浏览器前进、后退、页面跳转
js怎样控制浏览器前进、后退、页面跳转
48 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
78 2
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
68 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
60 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
78 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
79 3