js获取url参数值的几种方式
一、原生js获取URL参数值:
比如当前URL为:http://localhost:8080/#/page2?id=100&name=guanxy
<template>
<div>
<div>
<button style="background-color: orange" @click="getUrlParam">方式一:采用正则表达式获取地址栏参数 (代码简洁,重点正则)</button>
<p>结果:id={{method1_id}},name={{method1_name}}</p>
</div>
<div>
<button style="background-color: green" @click="getUrlParam2"> 方法二:split拆分法 (代码较复杂,较易理解)</button>
<p>结果:id={{method2_id}},name={{method2_name}}</p>
</div>
<div>
<button style="background-color: aqua" @click="getUrlParam3"> 方法三:split拆分法(根据参数名获取对应的值)</button>
<p>结果:id={{method3_id}},name={{method3_name}}</p>
</div>
</div>
</template> <script>
export default {
name: "page2",
data() {
return {
method1_id: '',
method1_name: '',
method2_id: '',
method2_name: '',
method3_id: '',
method3_name: '',
}
},
methods: {
getUrlParam() {
//为什么window.location.search取值为空?
//“http://localhost:8080/#/page2?id=100&name=guanxy”那么使用window.location.search得到的就是空(“”)。
// 因为“?id=100&name=guanxy”串字符是属于“#/page2?id=100&name=guanxy”这个串字符的,也就是说查询字符串search只能在取到“?”后面和“#”之前的内容,如果“#”之前没有“?”search取值为空。
this.method1_id = this.getQueryString('id');
this.method1_name = this.getQueryString('name');
},
getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let url = window.location.hash.split('?')[1].match(reg);
// console.log(url)
if (url != null) {
return decodeURI(url[2])//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
} else {
return null
}
},
getUrlParam2() {
let url = window.location.hash.split('?')[1].split("&");
// console.log(url)
let paramObj = new Object()
url.forEach((item, i) => {
paramObj[item.split('=')[0]] = item.split('=')[1]
})
this.method2_id = paramObj.id,
this.method2_name = paramObj.name
},
getUrlParam3() {
this.method3_id = this.getQueryVariable('id');
this.method3_name = this.getQueryVariable('name')
},
getQueryVariable(variable) {
let url = window.location.hash.split('?')[1].split("&");
for (let i = 0; i < url.length; i++) {
let pair = url[i].split('=');
if (pair[0] == variable) {
return pair[1]
}
}
return false
}
}
}
</script> <style scoped> </style>
页面效果:
二、Vue 获取URL参数值
<p>params获取当前路由参数:id={{this.$route.params.id}},name={{this.$route.params.name}}</p>
<p>query获取当前路由参数:id={{this.$route.query.id}},name={{this.$route.query.name}}</p>
js获取url参数值的几种方式的更多相关文章
- js获取url参数值的两种方式
js获取url参数值的方法有很多,下面也为大家介绍两种. 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(" ...
- js获取url参数值(HTML之间传值)
<h3>未设置设备: <a href="javascript:addTab('设备列表','PKE_DeviceContent/PKE_DeviceContent.aspx ...
- js获取url参数值
用过的封装好的js获取url问号后的参数的方法: <script> var Request = new Object(); Request = GetRequest();var error ...
- js获取url参数值,js获取其他页面传递而来的值
index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...
- js获取url参数值的方法
index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...
- js获取url参数的两种方法
js获取参数,在以前我都是用正在去拆分,然后获取,这种方式感觉是最简单的 方式1: function QueryString(item) { var sValue=location.search.ma ...
- js获取url参数值的方法总结
1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及参数值的集合 /** * [获取URL中的参数名及参数值的集合] * 示例URL:http://htmlJsTest/ ...
- (转)js获取url参数值
明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...
- js获取url参数值的方式
定义方法: function getParam(paramName) { paramValue = ""; isFound = false; paramName = paramNa ...
随机推荐
- visulabox切换到菜单栏模式右ctrl + C
2)首次看到1024x768的桌面时,查看可用的分辨率时,可能只能看到1024x768和800x600两种,其实,如果在virtualbox中按 右ctrl + C(Switch to Scaled ...
- 前端学习(二十六)移动端s(笔记)
===================================================弹性布局rem布局---------------------------------------- ...
- jquey弹出框demo
默认 $('#btn-01').click(function(){ $.dialog({ contentHtml : '<p>我是默认弹出对话框示例展示.我只是用来占位的内容展示,仅仅用来 ...
- Tomcat 配置错误界面
Tomcat发生错误时跳转到错误页面 注意 :5.0下操作需要删除掉注释语句,不然报错,原因未知 一.修改 tomcat 的配置文件 修改 tomcat 的配置文件,当页面发生错误时跳转到指定的页面, ...
- mongoose 与 mylab 的使用 (1)
1.引入mongoose 模块 const mongoose = require('mongoose'); 2.连接数据库 //连接数据库 mongoose.connect( db, {useNew ...
- 当input中的内容改变时触发的事件
当input中的内容改变时触发的事件 1 $('#id').bind('input propertychange', function() { //处理内容 } 循环js事件 $(document). ...
- Math.random()详解
Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,是Java语言常用代码.例如:double a=Math.random()*(3-1)+1,设置 ...
- find及其他命令
Find命令 Find / -type f :f为普通文件 Find / -name *.txt :查找.txt结尾的 Find / -size +30M :找根目录下大于30M的文件 F ...
- boost string algorithm
The Boost.StringAlgorithms library provides many free-standing functions for string manipulation. 1. ...
- 【集群】Redis的哨兵模式和集群模式
哨兵模式 哨兵模式是redis高可用的实现方式之一 使用一个或者多个哨兵(Sentinel)实例组成的系统,对redis节点进行监控,在主节点出现故障的情况下,能将从节点中的一个升级为主节点,进行故障 ...