前言

需求在原来的项目基础上做浏览器3d呈现，我使用的是一个完整的框架展示3D文件，框架集成度太高，无法进行整合到自己的项目中，所以目前打算开两个服务器，进行页面跳转打开3d展示。
功能点：
1、如何跳转
2、如何传参

a标签实现新页面打开另一个项目

<a href="http://localhost:9999/" @click="transmit()" rel="nofollow noreferrer" target="_blank">新窗口打开3D文件</a>

解释：a标签可以访问外部资源  
href="http://localhost:9999/"改为我们需要的项目地址就可以了

跨域传值

方法一：适用于传递的值数据简单，保密性不高的情况下
	步骤一：http://~~~~?a=" "&b=" ",
	步骤二：新页面接收解析url地址获取后面的参数

但是我想传递的是token信息以及3D文件在服务器的URL数组，所以我用的cookie加密保存信息数据，新页面打开直接从cookie中获取解密数据
实现代码：

• 源vue项目代码
  1、封装cookie

  /* 
  * 设置cookie
  * @params c_name key
  * @params value value
  * @params expiremMinutes 过期时间 单位：分钟
  * @return null
  */
  function setCookie(c_name, value, expiremMinutes) {
    var exdate = new Date();
    exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);
    document.cookie = c_name + "=" + escape(value) + ((expiremMinutes == null) ? "" : ";expires=" + exdate.toGMTString());
  }
  //escape对字符串编码函数
  
  /* 
  * 读取cookie
  * @params c_name key
  * @return value || ''
  */
  function getCookie(c_name) {
    if (document.cookie.length > 0) {
      var c_start = document.cookie.indexOf(c_name + "=");
      if (c_start != -1) {
        c_start = c_start + c_name.length + 1;
        var c_end = document.cookie.indexOf(";", c_start);
        if (c_end == -1)
          c_end = document.cookie.length
        return unescape(document.cookie.substring(c_start, c_end))
      }
    }
    return ""
  }
  
  /* 
  * 删除cookie
  * @params c_name 
  * @return null
  */
  function delCookie(c_name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(c_name);
    if (cval != null) {
      document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
    }
  }
  
  export {
    setCookie,
    getCookie,
    delCookie
  }
  

  2、点击按钮时新页面打开同时把信息保存到cookie中

   <el-button>
   <!-- <a :href="hrefapi" rel="nofollow noreferrer" target="_blank">新窗口打开3D图片</a> -->
   <a href="http://localhost:9999/" @click="transmit()" rel="nofollow noreferrer" target="_blank">新窗口打开3D文件</a>
  </el-button>
  

  import { setCookie, getCookie, delCookie } from '@utils/cookie';
  
  data(){
      return{
        fileList: [ // 跨域3d项目传递的文件列表
          {
            url:'https://````/2020/01/06/brain_A.vtk',
            name: 'brain_A.vtk'
          },
          {
            url:'https:````/brain_B.vtk',
            name: 'brain_B.vtk'
          },
          {
            url:'https://````/brain_C.vtk',
            name: 'brain_C.vtk'
          },
          {
            url:'https://```/2020/01/06/brain_D.vtk',
            name: 'brain_D.vtk'
          }
        ],
        girdertoken: '' // 跨域3d项目传递的token信息
      }
    },
  created(){
      // 获取token信息 项目token保存在sessionStorage中
      this.girdertoken = sessionStorage.getItem('token')
    },
  methods:{
      transmit(){
        let base64 = new this.Base64();
        setCookie('transmit-files', JSON.stringify(this.fileList), 10080);
        setCookie('transmit-token', this.girdertoken, 10080);
      },
  }
  

• 3d项目代码
  1、项目存在包js-cookie 所以不需要封装cookie了，但是需要解密的函数

  import cookies from 'js-cookie';
  

  2、一进入页面就需要解析 写在created里面

  data() {
      return {
        fileLists:[ // 接收平台传过来的的文件列表
        ],
        token: '' , // 接收平台传过来的token
      };
    },
    created() {
      this.fileLists = JSON.parse(this.getCookie('transmit-files')) // 接收传过来的file列表
      this.token = cookies.get('transmit-token')
    },
     methods: {
  	    getCookie(c_name) {
  	      if (document.cookie.length > 0) {
  	        console.log('document.cookie',document.cookie)
  	        var c_start = document.cookie.indexOf(c_name + "=");
  	        if (c_start != -1) {
  	          console.log('c_start',c_start)
  	          c_start = c_start + c_name.length + 1;
  	          var c_end = document.cookie.indexOf(";", c_start);
  	          if (c_end == -1)
  	            c_end = document.cookie.length
  	            console.log('document.cookie.substring(c_start, c_end)',document.cookie.substring(c_start, c_end))
  	          return unescape(document.cookie.substring(c_start, c_end))
  	        }
  	      }
  	      return ""
  	    },
  }
  

cookie传参问题处理

1、cookie传参只有在同源的网络才可以进行传参
如上述地址都是localhost本地地址
2、cookie传参有大小限制，而且cookie中的值会随接口请求进行携带，如果携带值过长就会报403，请求头过大无法发送请求的错误

问题处理：
可以从url地址中进行传递token

window.open(path+`?token=${token}`)

网页打开即解析地址获取token存储到sessionStorage中

serilizeUrl(url){ // 解析url地址参数
    let urlObject = {}; // 定义一个对象用来保存最后的值
    if(/\?/.test(url)){
      // 正则test（）方法只需要待测试字符串中包含了要测试的字符串就是ture
      // /\?/.test(url):url中是否含有? 返回false或者true
      let urlString = url.substring(url.indexOf("?")+1);
      // 这里调用了字符串的两个方法 indexOf()和substring()
      // indexOf()返回字符串中？的索引下标 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
      // substring()字符串截取方法 substring(strat,end) 方法用于提取字符串中介于两个指定下标之间的字符 strat起始位置 end结束位置如果没有设置就一直截取到字符串末尾
      // url.substring(url.indexOf("?")+1)截取从?后面所有字符
      let urlArray = urlString.split("&");
      // 字符串的split()方法 字符串转数组,数组每一项都类似a=1的字符串
      for(let i=0;i<urlArray.length;i++){
        // 遍历每一项
        let urlitem=urlArray[i];
        let item =urlitem.split("=");
        // 对数组每一项进行再次分割
        urlObject[item[0]] = item[1];
        // 添加到对象中
      }
      return urlObject;
    }
    return null;
  },

let arr=this.serilizeUrl(window.location.href)
    if(arr){
      if(arr.token){
        sessionStorage.setItem('token', arr.token)
        this.token = arr.token
      }
    }
    if(sessionStorage.getItem('token')){
      console.log(sessionStorage.getItem('uid'))
      // this.uid = sessionStorage.getItem('uid')
      this.token = sessionStorage.getItem('token')
    }