Vue 获取url传参

举报
SHQ5785 发表于 2023/09/26 08:55:41 2023/09/26
【摘要】 js获取url参数有两种情况: 一、应用场景一:内部页面之间互相传值假如要从A页面跳转到B页面,this.$router.push({path:"/B",query:{ Id : this.tId , ...}})进入B页面之后,this.Id = this.$route.query.Id;就能将A页面的id传入B页面,进行参数获取。 二、应用场景二:外系统跳转Vue项目时自带参...

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)

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。