vue4 跳转外部链接_vue项目跳转到外部链接

vue项目中遇到一个打印的功能。思考之后决定点击按钮，跳转到一个HTML页面(后台写的)，利用window.print()方法调用浏览器的打印的功能。

所以，现在的问题是，怎样跳转到外部链接。开发vue项目的人都知道，vue项目会分为三个版本：开发，测试，生产，我们可以在config文件夹下面的dev.env.js，prod.env.js，test.env.js配置路径。

所以我们就会遇到跨域的问题。

js:

let Path = process.env.APP_EXCEL_PATH+'print.html?name=1'

window.open(Path)

一开始利用地址栏传参的方式，就是直接在路径上添加参数，然后再HTML文件中获取地址参数渲染就行：

HTML中的js:

window.οnlοad=function(){

var n = getParam("name");

document.getElementById("name").innerHTML = n;

}

function getParam(paramName) {

paramValue = "", isFound = !1;

if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {

arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;

while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++

}

return paramValue == "" && (paramValue = null), paramValue

}

function printme(){

document.body.innerHTML=document.getElementById('container').innerHTML+'
';

window.print();

}

之后遇到中文转码的问题，在地址栏传入中文会导致乱码问题，后来通过入参时利用encodeURI(encodeURI(name));编码，然后， HTML中利用decodeURI(getParam("name"));解码。解决问题。

之后，由于入参比较多而且中文也很多，导致地址栏参数长度过长HTML不能全部解读。至此，这个问题无法突破。

后来想到H5的本地存储，可以在跳转的先给数据存储在本地，然后再HTML中在从本地中取出来。觉得可以实现，然后发现HTMl中的数据为null，原来并没有取到本地数据，发现本地存储也有同源策略的问题，也就是跨域的问题，发现我在本地开发环境时是localhost:8080，而我跳转的页面的域名是127.0.01:8080端口，他们各自都有localStorage。原来问题就是域名，然后我打包在本地的Tomcat运行，发现可以实现。至此，问题解决。

在vue项目的组件中：

js:

let Path = process.env.APP_EXCEL_PATH+'print.html'

window.open(Path)

vue 路由跳转到外部链接

尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...

vue项目中跳转到外部链接方法

当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

vue+el-menu设置了router之后如何跳转到外部链接

点击跳转到xxx 方法:(调用函数) See (e) { window.loc ...

vue项目微信分享之后路由链接被破坏怎么办

异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...

小程序web-view的使用,跳转到外部链接~

先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码:

随机推荐

Github+Jekyll —— 创建个人免费博客(二)Ruby+Jekyll部署

摘要: 本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术. ======================= ...

使用NUGet自动下载(还原)项目中使用的包

签出完整项目后,在解决方案名称上点右键,选择"启用NuGet程序包还原",如下图: 出现询问,当然要点是:是 当完成后,会发现在解决方案中,多出".nuget" ...

[转]XSS现代WAF规则探测及绕过技术

初始测试 1.使用无害的payload,类似,,观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过滤<>等等: 2.如果 ...

Oracel查询根据部分字段去重复

一般一个表的id是唯一的,如果除去id则会有重复数据,有时做项目时查询要求根据某几个字段去掉重复记录,并且查询保留id 以下是Oracel查询时根据部分字段去重复,例如,查询的字段包括id,Sys,C ...

Java Hour 55 Spring Framework 2

上一章节估计被官方的说明文档扯晕了,其实说白了不就是个IOC 注入的容器么,用过了微软Enterprise Library 的Unity 的我还会怕这个.自己随便写个demo, 将知识的主题框架先构建 ...

[压缩解压缩] SharpZip--压缩、解压缩帮助类

里面有三个类都是用于压缩和解压缩的.大家看下图片 看下面代码吧 /// /// 类说明:SharpZip /// 编 码 人:苏飞 /// 联系方式:361983679 ...

html5中的一些小知识点(CSS)

1.点击a标签周围区域就可以进入超链接: a标签 的css样式中的 display属性设置为block 就可以了 2.文字左右居中: text-align 属性值为 center 3.文字上下居中:  ...

常见的HTTP报头(头参数)

本内容摘抄自 中文译本附录C '常见的HTTP报头'. 原文作者:Leonard Ricbardson & Sam Ruby 翻译:徐涵. ...

PHP中redis的使用

redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集合).这些数据类 ...

hdu -1114(完全背包)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 思路:求出存钱罐装全部装满情况下硬币的最小数量,即求出硬币的最小价值.转换为最小背包的问题. # ...