vue中url实现跨端传参

开发中时常会出现跨端跳转，比如：pc端跳转另一个pc端，pc端跳转移动端，移动端跳转移动端，基本都是实现授权登录，或者是免登录。

而跳转过程中，参数的传递的话，通常分为两种情况。

一，同域名传参

如果两个URL的协议、域名和端口都相同，我们就称这两个URL同源。

那么就是在同一域名下，则可以使用loostorage进行传参，或者cookie

二，非同域传参

如果两个URL的协议、域名和端口都不相同，那么就会违反同源策略，出现跨域。

常用跨域传参的方式有：

1. document.domain
2. iframe
3. location.hash
4. window.name
5. postMessage
6. CORS
7. 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`