共计 789 个字符,预计需要花费 2 分钟才能阅读完成。
导读 | vue-router 获取 url 传递的参数分为两种情况。 |
获取 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)
正文完
星哥玩云-微信公众号
