VUE远程下载功能，动态赋值路径URL（el-link的使用）

之前我们学过下载功能，是使用<a>标签+herf路径。

今天我们下载使用

<el-link :download="downloadname" :href="downloadUrl2" id="moban2" class="downloadBtn2" type="primary">
        <el-button id="dibu_download" type="primary" @click="pullLog()" plain >拉取</el-button>
</el-link> 

然后data，这里一般时存放下载的路径，我们之前也讲过

  data() {

    return {

          downloadUrl2:"",//平时我们下载时直接再这里写的路径，但这里我们要动态赋值路径，等待后端返回下载链接放到这里的意思

    }

}

然后后端返回链接，我们原理以为直接对downloadUrl2进行赋值

urltest = "http:\192.168.0.1:8080filefilename.zip" //这个是后端转过来的下载链接，就是再浏览器直接回车直接下载的

this.downloadUrl2 = urltest

问题来了：

然后你执行会发现下载失败，但是再浏览器直接输入这个地址就可以下载，这是为什么？

实际上我们赋值的是downloadUrl2 这个变量，但是href的属性没有改变，我们可以打印赋值后href看看

var v = document.getElementById("moban2");

console.log("href路径:",v.href);

打印出来的地址不是后端转过来的，这是为什么，这是因为初始再data中赋值是空的，后面你再赋值是没有赋值进去的，我们要对html即el-link中的href的属性进行赋值，而不是对变量进行赋值

所以修改为：

urltest = "http:\192.168.0.1:8080filefilename.zip" //这个是后端转过来的下载链接，就是再浏览器直接回车直接下载的

//给<el-link>中的href进行赋值方法
 var v = document.getElementById("moban2");//获取html的el-link标签
 v.href = urltest ; //赋值到href属性

这样才是我们要的路径。去试试吧

最后

以上就是孝顺心锁为你收集整理的VUE远程下载功能，动态赋值路径URL（el-link的使用）的全部内容，希望文章能够帮你解决VUE远程下载功能，动态赋值路径URL（el-link的使用）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。