HTML页面跳转页面及参数传递你了解多少？

提示：页面跳转传参有多种方式，本文讲解内容为html跳转传参

目录

一、页面跳转

二、页面跳转并传参

1.跳转前页面

2.接收页面

总结

---

一、页面跳转

• 超链接跳转

<a href="../html/active_three.html" class="txt">查看更多</a>

• js跳转

// 以下方式直接跳转

window.location.href="hello.html";

// 以下方式定时跳转

setTimeout("javascript：location.href="hello.html"", 5000);

二、页面跳转并传参

1.跳转前页面

代码如下（示例）：

HTML部分

<div class="bottom_center" v-for="(item1,index1) in item.list" v-if="index1==0">
	<img :src="hrefURL+item1.images" alt="" class="left_img">
	<div class="bottom_center_text f1 flex_column" @click="goInfo(item1.id)">
		<span class="title">{{item1.name}}</span>
	    <p class="bottom_center_box" v-html="item1.content">
			<!-- {{item1.content}} -->
		</p>
	</div>
</div>

JS部分

goInfo(id) {
	location.href = "../html/message_content.html?id=" + id
},

2.接收页面

代码如下（示例）：

HTML部分请各位按需排版，以下代码为JS部分

<script src="../js/jquery.js"></script>
<script src="../layer/layer.js"></script>  //弹窗
<script type="text/javascript">

mounted() {
			this.initData()
		},
methods：{
        //获取详情
    initData() {
		function getParams() {
			var params = {};
    		if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
        		    var paramArray = unescape(this.location.search).substring(1,this.location.search.length).split("&");
        			if (paramArray.length > 0) {
        				paramArray.forEach(function(currentValue) {
        					params[currentValue.split("=")[0]] = currentValue.split("=")[1];
        				});
        			}
    			}
    			return params;

			}
			var name = getParams().id;   //接收的id
			console.log(name)
			let sendData = {
				id: name,
				type: "meet"
			};
			$.ajax({
				type: "post",
				url: hrefURL + '/api/index/detail',
				data: sendData,
				success: (res) => {
					if (res.code == 1) {
						console.log(res);
						this.datas = res.data
					} else {
						layer.msg(res.msg);
					}
				},
				//弹窗提示
				error(err) {
					layer.msg('网路出现故障；请稍后再试');
				}
			});
    },	
}

</script>		

注：上述案例中，引入了layer插件，具体请参考轮播图文章中layer插件详解

总结

以上就是今天要讲的内容啦，本文仅仅简单介绍了HTML页面跳转传参，更多页面跳转传参敬请期待噢~~~

✨原创不易，还希望各位大佬支持一下

👍点赞，你的认可是我创作的动力！

✏️评论，你的意见是我进步的财富！