(文章目录)
js
获取url
参数有两种情况:
一、应用场景一:内部页面之间互相传值
假如要从A页面跳转到B页面,
this.$router.push({path:"/B",query:{
Id : this.tId ,
...
}})
进入B页面之后,
this.Id = this.$route.query.Id;
就能将A页面的id传入B页面,进行参数获取。
二、应用场景二:外系统跳转Vue项目时自带参数
例如: https://shq5785.blog.csdn.net/list?Id=sunhuaqiang1#/
外系统跳转进入的url
会在Vue
项目编译后自动添加 “#/
”后缀 ,其中带的参数在 “#/
”之前,所以应用场景一中的方法无法获取,只能应用JS
的方法来获取,解析功能函数如下所示:
getURLParams(url) {
let param = url.split('#')[0]; //获取#/之前的字符串
var paramContent = param.split('?')[1]; //获取?之后的参数字符串
var paramsArray = paramContent.split('&'); //参数字符串分割为数组
var paramResult = {};
//遍历数组,拿到json对象
paramsArray.forEach((item, index, paramsArray) => {
paramResult[paramsArray[index].split('=')[0]] = paramsArray[index].split('=')[1];
})
return paramResult;
}
调用方式如下:
this.getURLParams(window.location.href)
三、拓展阅读
- 《[Vue进阶(幺叁捌):vue路由传参的几种基本方式]》
- 《[Vue进阶(二十六):详解router.push()]》
- 《[ReactNative进阶(四十六):页面跳转及传参]》