【Vue】跳转外部链接并携带参数并触发

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

需求

当平台运行多个系统时"系统一""系统二" 都是不同时间段开发的

可以从"系统一"点击按钮跳转到"系统二"并且完成 "系统二" 登录操作直接显示"系统二"的主页可以视为两套系统使用相同的用户名密码

方案一

通过 window.location.href 修改url 进行跳转

带参数传值方法

点击跳转按钮的函数内 url + 参数

let url = 'http://192.168.200.126:8080/login?account=' + param.account + "&password=" + param.password
window.location.href = url;

带参数接受方法

登录页面在Vue 的 created 生命周期钩子函数调用方法先得到url ,单纯的字符串处理将得到的参数填入form表单中触发提交再将地址栏显示的用户名密码的明码覆盖掉,就可以直接跳转到主页了

    getRequest() {
      let url = location.search; //获取url中"?"符后的字串 
      if(url){
        url = url.substring(1)
        let urlList = url.split('&')
        let account = urlList[0].split('=')[1]
        let password = urlList[1].split('=')[1]
        console.log({'account':account,'password':password})
        this.form.account = account
        this.form.password = password
        this.submit()
        location.href = 'http://192.168.200.126:8080/#/home'
      }
    },

或者参数存在 sessionStorage 里

      url = 'http://localhost:8080/login?account=' + param.account// + "&password=" + param.password
      window.location.href = url;

  getRequest() {
      let url = location.search; //获取url中"?"符后的字串 
      let param = sessionStorage.length ? JSON.parse(sessionStorage.userInfo):sessionStorage
      if(url){
        // url = url.substring(1)
        // let urlList = url.split('&')
        // let account = urlList[0].split('=')[1]
        // let password = urlList[1].split('=')[1]
        // console.log({'account':account,'password':password})
        this.form.account = param.account
        this.form.password = param.password
        this.submit()
        location.href = 'http://localhost:8080/#/home'
      }
      console.log(param)
    },

然后将系统二的用户管理接口CURD接口放到白名单通过Vue 的跨域调用系统二后台同步用户数据或者通过数据库作业计划执行存储过程进行用户账号增改的同步

仍然能看到登陆画面

这里的密码给保存明码在 session 中或者在数据库中保存明码这里只存一个表id到 “系统二”查一下这个明码的用户名密码再登陆这个明码表的CURD 操作接口同样是开放白名单或者数据库同步