常见能携带参数的url,通常是出现在后端的地址或动态语言格式之后,如php?参数=值, jsp?参数=值。一般使用这种方式,是为了将参数传到网站后端进行接收处理的。
那html使用这样的方式携带参数,怎么都想不通如何接收和使用,最近写的一个项目中用到了这个,现总结一下。
即将携带参数的URL: http://localhost/course-list.html?cateId=5
目的: 将 cate=5带给 课程列表页面,由页面vue 的data接收,并从后端请求 “分类为5的课程列表数据”
原理: 使用 JavaScript 根据来源的url解析参数
关键点:此代码保存为js文件,并导入到course-list.html
//根据传递过来的参数name获取对应的值
function getParameter(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = location.search.substr(1).match(reg);
if (r!=null) return (r[2]); return null;
}
Vue接收参数和发送请求部分:
data:{
cateId:\'\'
},
methods:{
getListByCateId(){
发送请求的方法体
}
},
created(){
//调用js文件中的方法解析参数
this.cateId=getParameter("cateId")
//调用方法发起请求 获取列表数据
this.getListByCateId()
}