通过原生js获取路由url中的参数的实例和讲解

原文链接：http://blog.csdn.net/zhangwenwu2/article/details/77507381

通过url传递参数是我们在开发中经常用到的一种传参方法，但通过url传递后改如果获取呢？下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。

前言

众所周知vue中使用路由的方式设置url参数，但是这种方式必须要在路径中附带参数，而且这个参数是需要在vue的路由中提前设置好的。

相对来说，在某些情况下直接在url后面拼接？mid=100的方式传递参数更灵活，你不需要设置路由，只需要在url后拼接参数即可，但是这种方式就需要通过javascript获取并提取url中的参数，通过传统的方式直接在页面中获取是行不通的了，因为vue中是无法通过location.search()来获取url问号之后的内容的。

当然，这个问题也有解决方法，就是把获取参数的脚本代码注册成全局方法就可以了。下面话不多说了，来一看看详细的方法示例吧。

示例代码

第一步：创建utils.js文件，并保存到项目根目录

export default{

getUrlKey:function(name){

return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;

}

第二步：在主js方法（main.js)中注册全局方法

import utils from './utils' //获取url参数

Vue.prototype.$utils=utils //注册全局方法

第三步：vue文件中引用方法

1	`let channel=this.$utils.getUrlKey("channel")`

通过原生js获取路由url中的参数的实例和讲解相关推荐

python获取url列表参数_python 获取url中的参数列表实例
Python的urlparse有对url的解析,从而获得url中的参数列表 import urlparse urldata = "http://en.wikipedia.org/w/api. ...
js获取页面url中的各项值
一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...
如何用js获取浏览器URL中查询字符串的参数
首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...
js获取当前url的中文参数
问题源自于大傻同学的需求:A.html的参数传给B.html.必须是在B.html中用js代码来获取该url中的中文参数... 网上的类似问题:http://bbs.chinaunix.net/vie ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
原生js获取URL参数
原生js获取URL参数 function getUrlParams(name) { // 不传name返回所有值,否则返回对应值var url = window.location.search;//s ...
js 判断是域名还是ip并获取当前url中指定部分
**一.判断是域名还是ip checkdomain=()=>{//验证是否是域名let doname = /^([\w-]+\.)+((com)|(net)|(org)|(gov\.cn)|(i ...
js获取url中的参数
window.location: window的location对象 window.location.href 整个URl字符串(在浏览器中就是完整的地址栏) window.location.prot ...
如何获取URL中的参数
获取URL中的参数 1. 使用JS函数获取URL参数使用示例 2. Angular应用中,从URL中获取参数信息的方法使用示例 ActivatedRoute属性 1. 使用JS函数获取URL参数 ...
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式行内样式假装有内容 head内部样式 div { widt ...

通过原生js获取路由url中的参数的实例和讲解

通过原生js获取路由url中的参数的实例和讲解相关推荐

最新文章

热门文章