html格式，使用URL携带参数

常见能携带参数的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()
}

标签：name,URL,携带,html,参数,格式,接收,cateId
来源： https://www.cnblogs.com/buglife/p/14402123.html