位置: IT常识 - 正文
【Vue】跳转外部链接并携带参数并触发(vue跳转到外部链接且带上参数)
编辑：rootadmin推荐整理分享【Vue】跳转外部链接并携带参数并触发(vue跳转到外部链接且带上参数)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue跳转到外部链接且带上参数,vue跳转到外部链接,新开一个页面,vue跳转到外部链接,新开一个页面,vue跳转到另外一个界面,vue跳转到外部链接,新开一个页面,vue跳转外部网站再跳回,vue跳转外部网站再跳回,vue如何跳转外部网页地址,内容如对您有帮助，希望把文章链接给更多的朋友！
需求：
当平台运行多个系统时（"系统一"，"系统二" 都是不同时间段开发的）
可以从"系统一"点击按钮跳转到"系统二"，并且完成 "系统二" 登录操作，直接显示"系统二"的主页，可以视为两套系统使用相同的用户名密码
方案一通过 window.location.href 修改url 进行跳转
带参数传值方法：
点击跳转按钮的函数内 url + 参数
let url = 'http://192.168.200.126:8080/login?account=' + param.account + "&password=" + param.passwordwindow.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 操作接口 同样是开放白名单或者数据库同步
方案二通过Vue 的 跨域实现
首先，明确，什么是跨域？
协议 域名/IP 端口 这三个只要有一个不同，就会出现跨域。
从别的地方拷过来的例子：
#协议跨域 http://a.baidu.com 访问 https://a.baidu.com； #端口跨域 http://a.baidu.com:8080 访问 http://a.baidu.com:80； #域名跨域 http://a.baidu.com 访问 http://b.baidu.com；
再联想到 Vue 的 “vue-axios 前后端分离 跨域访问的实现”：
(55条消息) Vue项目生成+跳转页面+跨域_圆滚滚大西瓜的博客-CSDN博客_vue跨域跳转
还要考虑两个后台 的 token
(55条消息) 两个跨域页面进行跳转传参的方案_bigHead-的博客-CSDN博客_跨域跳转页面
好，开始尝试
未完待续
需求变更，不用试了，就这样吧
上一篇：Vue3 + Vite + TypeScript + dataV 打造可视化大屏
下一篇：2.前端笔记-CSS-字体属性(前端css要掌握到什么程度)
