vue不通过路由直接获取url中参数的方法示例
作者:zhangwenwu 时间:2024-04-30 08:41:06
前言
众所周知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")
来源:http://blog.csdn.net/zhangwenwu2/article/details/77507381
标签:vue,url参数,路由
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
FSO遍历文件夹目录及目录下文件asp代码
2008-10-10 12:54:00
python 异常的传递性及主动抛出学习
2021-03-19 05:02:38
opencv3/C++实现视频读取、视频写入
2021-12-17 10:01:16
![](https://img.aspxhome.com/file/2023/1/133261_0s.jpg)
合并百度影音的离线数据( with python 2.3)
2022-01-11 09:22:14
vue中keep-alive组件的入门使用教程
2023-07-02 16:38:51
Go语言sync包与锁实现限制线程对变量的访问
2024-02-21 13:52:29
go Antlr重构脚本解释器实现示例
2024-04-26 17:19:44
![](https://img.aspxhome.com/file/2023/8/134258_0s.png)
goland把go项目打包进docker镜像的全过程记录
2024-04-25 13:17:32
![](https://img.aspxhome.com/file/2023/1/134351_0s.png)
Python中pandas模块DataFrame创建方法示例
2022-07-19 03:06:09
Python操作CSV格式文件的方法大全
2023-07-08 18:57:45
![](https://img.aspxhome.com/file/2023/8/71488_0s.png)
隐藏修改文件时间和文件属性的ASP脚本
2011-03-17 11:15:00
在PyCharm中实现关闭一个死循环程序的方法
2023-06-04 22:46:12
![](https://img.aspxhome.com/file/2023/0/100910_0s.jpg)
详解JS ES6变量的解构赋值
2024-04-19 09:51:35
Python中使用语句导入模块或包的机制研究
2023-02-21 15:06:40
Sql学习第三天——SQL 关于CTE(公用表达式)的递归查询使用
2024-01-23 01:00:10
![](https://img.aspxhome.com/file/2023/0/84340_0s.png)
Golang 高效排序数据详情
2023-06-23 08:23:41
![](https://img.aspxhome.com/file/2023/6/87626_0s.jpg)
python+Word2Vec实现中文聊天机器人的示例代码
2023-08-04 13:11:29
Python Pygame中精灵和碰撞检测详解
2021-01-31 05:45:27
tensorflow下的图片标准化函数per_image_standardization用法
2022-10-10 13:54:06
![](https://img.aspxhome.com/file/2023/0/85370_0s.jpg)
数据库名词解释
2008-09-12 17:28:00