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:8080\file\filename.zip" //这个是后端转过来的下载链接,就是再浏览器直接回车直接下载的

this.downloadUrl2 = urltest

问题来了:

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,你可以按照以下步骤进行操作: 1. 安装 `axios` 和 `vue-router`: ```bash npm install axios vue-router ``` 2. 创建一个名为 `books.vue` 的组件,用于显示数据: ```html <template> <div> <el-table :data="books" style="width: 100%"> <el-table-column prop="title" label="Title"></el-table-column> <el-table-column prop="author" label="Author"></el-table-column> <el-table-column prop="publisher" label="Publisher"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { books: [] } } } </script> ``` 3. 在路由文件中,定义一个路由,用于加载数据并显示 `books.vue` 组件: ```javascript import axios from 'axios'; import VueRouter from 'vue-router'; import Books from './components/books.vue'; const router = new VueRouter({ routes: [ { path: '/books', component: Books, beforeEnter(to, from, next) { axios.get('/api/books').then(response => { // 将获取到的数据赋值给 books 变量 Books.data().books = response.data; next(); }); } } ] }); export default router; ``` 4. 在 `main.js` 文件中,引入 `vue-router` 和路由文件,并将路由挂载到 Vue 实例上: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import router from './router'; Vue.use(VueRouter); new Vue({ router }).$mount('#app'); ``` 5. 最后,在页面中添加一个链接,用于触发路由切换: ```html <router-link to="/books">Books</router-link> ``` 这样,当你点击链接时,路由会切换到 `/books` 路径,并加载数据后显示在表格中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

测试狂人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值