通过原生js获取路由url中的参数的实例和讲解
原文链接:http://blog.csdn.net/zhangwenwu2/article/details/77507381通过url传递参数是我们在开发中经常用到的一种传参方法,但通过url传递后改如果获取呢?下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。前言众所周知vue中使用路由的方式设置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文件,并保存到项目根目录
|
1
2
3
4
5
|
export default {
getUrlKey: function (name){
return decodeURIComponent(( new RegExp( '[?|&]' +name+ '=' + '([^&;]+?)(&|#|;|$)' ).exec(location.href)||[, "" ])[1].replace(/\+/g, '%20' ))|| null ;
}
}
|
第二步:在主js方法(main.js)中注册全局方法
|
1
2
3
|
import utils from './utils' //获取url参数
Vue.prototype.$utils=utils //注册全局方法
|
第三步:vue文件中引用方法
|
1
|
let channel= this .$utils.getUrlKey( "channel" )
|
更多推荐



所有评论(0)