vue中url实现跨端传参
开发中时常会出现跨端跳转,比如:pc端跳转另一个pc端,pc端跳转移动端,移动端跳转移动端,基本都是实现授权登录,或者是免登录。
而跳转过程中,参数的传递的话,通常分为两种情况。
一,同域名传参
如果两个URL的协议、域名和端口都相同,我们就称这两个URL同源。
那么就是在同一域名下,则可以使用loostorage进行传参,或者cookie
二,非同域传参
如果两个URL的协议、域名和端口都不相同,那么就会违反同源策略,出现跨域。
常用跨域传参的方式有:
- document.domain
- iframe
- location.hash
- window.name
- postMessage
- CORS
- JSONP
此篇简单总结url跳转跨域传参
1,发送
window.location.href = "http://baidu.com/#/login?from=https://xys.cc360.com/web/#/pay";
2,接收
//分情况跳转
if (this.$route.query!=null) {
this.sHttp = this.$route.query.from;
if (this.sHttp != null && this.sHttp != undefined) {
window.location.href =this.sHttp +"?"+ localStorage.getItem("token");//携带token
}
else {
this.$router.push("/home");
}
}
3,返回接收
mounted(){
if(window.location.search){
let appToken = window.location.search.split("?")[1].replace("%20"," ");
if(appToken.length<=50){
if(/bearer/.test(appToken)){
localStorage.setItem("Token",appToken);
}
}
}
}
4,常见的url传参可以总结为
传递定值,多个则用&隔开
"https://www.baidu.com?from=https://xys.cc360.com/web/#/pay"
"https://www.baidu.com?from=https://xys.com&table=https://xys.com"
传递变量,则用+拼接,多个变量则用+反撇号包裹&变量即可
"https://www.baidu.com?from=https://xys.cc360.com/web/#/pay"+ localStorage.getItem("star");
"https://www.baidu.com?from=https://xm/web/#/pay"+`&star`+`&sun`+`&moon`