提示:页面跳转传参有多种方式,本文讲解内容为html跳转传参
一、页面跳转
- 超链接跳转
<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页面跳转传参,更多页面跳转传参敬请期待噢~~~
✨原创不易,还希望各位大佬支持一下
👍点赞,你的认可是我创作的动力!
✏️评论,你的意见是我进步的财富!