一、原生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参数值的几种方式的更多相关文章

  1. js获取url参数值的两种方式

    js获取url参数值的方法有很多,下面也为大家介绍两种.  方法一:正则分析法  function getQueryString(name) {  var reg = new RegExp(" ...

  2. js获取url参数值(HTML之间传值)

    <h3>未设置设备: <a href="javascript:addTab('设备列表','PKE_DeviceContent/PKE_DeviceContent.aspx ...

  3. js获取url参数值

    用过的封装好的js获取url问号后的参数的方法: <script> var Request = new Object(); Request = GetRequest();var error ...

  4. js获取url参数值,js获取其他页面传递而来的值

    index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...

  5. js获取url参数值的方法

    index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...

  6. js获取url参数的两种方法

    js获取参数,在以前我都是用正在去拆分,然后获取,这种方式感觉是最简单的 方式1: function QueryString(item) { var sValue=location.search.ma ...

  7. js获取url参数值的方法总结

    1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及参数值的集合 /** * [获取URL中的参数名及参数值的集合] * 示例URL:http://htmlJsTest/ ...

  8. (转)js获取url参数值

    明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...

  9. js获取url参数值的方式

    定义方法: function getParam(paramName) { paramValue = ""; isFound = false; paramName = paramNa ...

随机推荐

  1. visulabox切换到菜单栏模式右ctrl + C

    2)首次看到1024x768的桌面时,查看可用的分辨率时,可能只能看到1024x768和800x600两种,其实,如果在virtualbox中按 右ctrl + C(Switch to Scaled ...

  2. 前端学习(二十六)移动端s(笔记)

    ===================================================弹性布局rem布局---------------------------------------- ...

  3. jquey弹出框demo

    默认 $('#btn-01').click(function(){ $.dialog({ contentHtml : '<p>我是默认弹出对话框示例展示.我只是用来占位的内容展示,仅仅用来 ...

  4. Tomcat 配置错误界面

    Tomcat发生错误时跳转到错误页面 注意 :5.0下操作需要删除掉注释语句,不然报错,原因未知 一.修改 tomcat 的配置文件 修改 tomcat 的配置文件,当页面发生错误时跳转到指定的页面, ...

  5. mongoose 与 mylab 的使用 (1)

    1.引入mongoose  模块 const mongoose = require('mongoose'); 2.连接数据库 //连接数据库 mongoose.connect( db, {useNew ...

  6. 当input中的内容改变时触发的事件

    当input中的内容改变时触发的事件 1 $('#id').bind('input propertychange', function() { //处理内容 } 循环js事件 $(document). ...

  7. Math.random()详解

    Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,是Java语言常用代码.例如:double a=Math.random()*(3-1)+1,设置 ...

  8. find及其他命令

    Find命令 Find / -type f    :f为普通文件 Find / -name *.txt :查找.txt结尾的 Find / -size  +30M   :找根目录下大于30M的文件 F ...

  9. boost string algorithm

    The Boost.StringAlgorithms library provides many free-standing functions for string manipulation. 1. ...

  10. 【集群】Redis的哨兵模式和集群模式

    哨兵模式 哨兵模式是redis高可用的实现方式之一 使用一个或者多个哨兵(Sentinel)实例组成的系统,对redis节点进行监控,在主节点出现故障的情况下,能将从节点中的一个升级为主节点,进行故障 ...