位置: IT常识 - 正文

【Vue】跳转外部链接并携带参数并触发(vue跳转到外部链接且带上参数)

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

推荐整理分享【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 的 跨域调用系统二后台同步用户数据 (或者 通过数据库作业计划执行存储过程进行用户账号增改的同步)

仍然能看到登陆画面

【Vue】跳转外部链接并携带参数并触发(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博客_跨域跳转页面

好,开始尝试

未完待续

需求变更,不用试了,就这样吧

 ​​​​​​​

本文链接地址:https://www.jiuchutong.com/zhishi/287235.html 转载请保留说明!

上一篇:Vue3 + Vite + TypeScript + dataV 打造可视化大屏

下一篇:2.前端笔记-CSS-字体属性(前端css要掌握到什么程度)

  • 抖音现在可以查看访客记录了吗(抖音现在查不了谁收藏我的作品)

    抖音现在可以查看访客记录了吗(抖音现在查不了谁收藏我的作品)

  • 腾讯PacewearS8手环续航怎么样(galaxy wearable 腾讯)

    腾讯PacewearS8手环续航怎么样(galaxy wearable 腾讯)

  • 中国移动和彩云是什么业务(中国移动和彩云app下载安装)

    中国移动和彩云是什么业务(中国移动和彩云app下载安装)

  • vivox30死机之后的解决办法(vivo手机死机了咋办?)

    vivox30死机之后的解决办法(vivo手机死机了咋办?)

  • 芒果tv怎么使用赠片券

    芒果tv怎么使用赠片券

  • 300mbps等于(300mbps等于多少兆)

    300mbps等于(300mbps等于多少兆)

  • 宽带连接错误651怎么解决(宽带连接错误651是什么意思)

    宽带连接错误651怎么解决(宽带连接错误651是什么意思)

  • 淘宝申请小二介入在哪里(淘宝申请小二介入需要多久可以处理好)

    淘宝申请小二介入在哪里(淘宝申请小二介入需要多久可以处理好)

  • 苹果手机发微信朋友圈老是折叠(苹果手机发微信语音时间短是怎么回事)

    苹果手机发微信朋友圈老是折叠(苹果手机发微信语音时间短是怎么回事)

  • 华为nova5pro快捷键怎么设置(华为nova5pro快捷截屏)

    华为nova5pro快捷键怎么设置(华为nova5pro快捷截屏)

  • 经常开热点对手机有什么影响(经常开热点对手机电池的影响)

    经常开热点对手机有什么影响(经常开热点对手机电池的影响)

  • 信号显示h代表什么(信号显示h代表什么意思)

    信号显示h代表什么(信号显示h代表什么意思)

  • 平板电脑开机键在哪里(平板电脑开机键一直闪怎么回事)

    平板电脑开机键在哪里(平板电脑开机键一直闪怎么回事)

  • 微光能视频聊天吗(微光怎么视频聊天)

    微光能视频聊天吗(微光怎么视频聊天)

  • p40是什么屏幕(p40是什么屏幕供应商)

    p40是什么屏幕(p40是什么屏幕供应商)

  • md514ch/a是ipad几代(md514zp/a是ipad几代)

    md514ch/a是ipad几代(md514zp/a是ipad几代)

  • 微信视频没有铃声是怎么回事(微信视频没有铃声怎么回事儿)

    微信视频没有铃声是怎么回事(微信视频没有铃声怎么回事儿)

  • vivo演示机是什么意思(vivo 演示机)

    vivo演示机是什么意思(vivo 演示机)

  • flash怎么用(q-flash怎么用)

    flash怎么用(q-flash怎么用)

  • 微信文件删了怎么恢复(微信文件删了怎么撤回)

    微信文件删了怎么恢复(微信文件删了怎么撤回)

  • 为什么别人评论我的快手有些看不了(为什么别人评论我快手我看不到)

    为什么别人评论我的快手有些看不了(为什么别人评论我快手我看不到)

  • iphone黑明单设置在哪里(苹果的黑名单在哪里)

    iphone黑明单设置在哪里(苹果的黑名单在哪里)

  • 表格不够用怎么往下拉(表格不够用怎么往下拉的视频)

    表格不够用怎么往下拉(表格不够用怎么往下拉的视频)

  • x5670相当于什么cpu(x5677相当于什么cpu)

    x5670相当于什么cpu(x5677相当于什么cpu)

  • 千牛怎么设置类目(手机千牛怎么设置类目)

    千牛怎么设置类目(手机千牛怎么设置类目)

  • vivo手机怎样关闭相册阅图(vivo手机怎样关闭广告)

    vivo手机怎样关闭相册阅图(vivo手机怎样关闭广告)

  • fwatch怎么绑定手机(fwatch手表怎么连接网络)

    fwatch怎么绑定手机(fwatch手表怎么连接网络)

  • return命令  从函数中退出并返回数值(return函数)

    return命令 从函数中退出并返回数值(return函数)

  • 保单税优识别码图片
  • 山东省增值税发票勾选认证平台
  • 如何判断固定资产资本化还是费用化
  • 远期交易怎么结算
  • 一般纳税人购销合同印花税计税依据
  • 银行内部利息支出
  • 航天金税服务费诈骗
  • 自然人税收管理系统扣缴客户端
  • 残保金每次缴纳都是一样的吗
  • 政府补助递延收益和其他收益的区别
  • 提供劳务企业所得税纳税义务发生时间
  • 报关单和进口增值税专用缴款书联系
  • 增值税出口免退什么意思
  • 先进制造业企业按照当期可抵扣进项税额
  • 现房销售土增税怎么缴纳
  • 自营方式建造固定资产增值税
  • 出口不退税怎么做账
  • 房地产开发企业会计科目
  • 电子发票没有纳税人识别号有效吗
  • 个人劳务费怎么开票
  • 全国增值税发票查询平台 手机版
  • 高新技术企业必须要有研发费用吗
  • 提货卡的发票要盖章吗
  • 支付境外佣金的记账凭证
  • 破产清算重整和解
  • 发改委规定电网企业职工福利费
  • 金蝶k3迷你版年度结账
  • 抵扣联复印件可以做账吗
  • 支付给法律顾问的钱
  • 清算财产分配会计分录
  • 房地产企业已预缴增值税如何抵扣
  • 企业拆迁补偿款税务最新政策
  • 备用金的会计分类
  • 单位卖二手车需交税吗
  • 应纳消费税包不包括代收代缴
  • 房屋修理费用
  • 耕地使用税的征收标准
  • vue引入mui
  • 外贸企业出口退税流程(详细步骤)
  • php面向对象的理解
  • php中实现文件上传需要用到哪几个函数
  • package.json详解
  • 21世纪20年代的中国
  • 发票明细清单怎么打印
  • 企业股东分红可抵税吗
  • 个税申报赡养老人可以填公婆吗
  • 视同销售的会计分录有哪些?
  • 押金的增值税处理流程
  • 小企业会计准则跨年红冲
  • 以土地作价投资合伙企业是否缴纳土地增值税
  • 结转损益类科目余额
  • 对方公司倒闭应收账款,销售需要承担吗
  • 代扣代缴的增值税算进项税吗
  • 河道工程修建维护管理费何时开始停征?
  • 股权转让如何缴纳个人所得税举例说明
  • 劳务发票成本怎么做账
  • mysql安装配置教程5.7.26
  • mysql集群原理详解
  • mysql数据库的总结
  • dockers容器
  • ubuntu服务器安装matlab2014a环境配置
  • 苹果Mac系统怎么切换输入法
  • w7系统如何设置
  • window10玩dnf怎么设置流畅
  • win7激活2020
  • win7电脑弹窗多怎么解决
  • win7 64位旗舰版电脑如何取消网页自动保存密码?win7取消自动保存网页密码的方法
  • mongoose怎么用
  • dos命令grub
  • pycharm远程调试代码
  • 菜鸟教程 安卓版
  • css中显示
  • python难度
  • 用javascript
  • 半透明图层怎么制作
  • 用javascript
  • jquery each return
  • 河南省医保网上报销流程
  • 远程视频监控设备
  • 发票是去国税还是地税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设