vue不通过路由直接获取url中参数的方法示例
更新时间：2017年08月24日 09:19:50 作者：zhangwenwu
通过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文件中引用方法
let channel=this.$utils.getUrlKey("channel")
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章
最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue大屏自适应的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
今天小编就为大家分享一篇基于axios 解决跨域cookie丢失的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vuex mutation action同级调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue3点击出现弹窗后背景变暗且不可操作的实现代码,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
一步步从Vue3.x源码上理解ref和reactive的区别
vue3的数据双向绑定,大家都明白是proxy数据代理,但是在定义响应式数据的时候,有ref和reactive两种方式,如果判断该使用什么方式,是大家一直不很清楚地问题,下面这篇文章主要给大家介绍了关于从Vue3.x源码上理解ref和reactive的区别的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue实现类似Spring官网图片滑动效果方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了vue Antd 输入框Input自动聚焦方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了antd-日历组件,前后禁止选择,只能选中间一部分的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
在Vue组件中,data函数用于定义组件的数据,本文主要介绍了Vue组件data函数的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
最新评论