vue3实现在新标签中打开指定网址的方法

 更新时间:2024年07月25日 09:49:36   作者:Python私教  
我希望点击查看按钮的时候,能够在新的标签页面打开这个文件的地址进行预览,该如何实现呢,下面小编给大家带来了基于vue3实现在新标签中打开指定的网址,感兴趣的朋友跟随小编一起看看吧

有一个文件列表,如下图:

在这里插入图片描述

我希望点击查看按钮的时候,能够在新的标签页面打开这个文件的地址进行预览,该如何实现呢?

比如:

实际上要实现这个并不难,参考demo如下:

首先,给按钮绑定点击事件:

<a-button
              size="small"
              type="primary"
              @click="handleView(record)"
          >
            查看
          </a-button>

然后,实现点击方法:

const handleView = (record) => {
  const url = `/api/download/${record.uuid}_${record.name}`
  window.open(url, "_blank")
}

最终就实现了这个功能!!!

到此这篇关于vue3实现在新标签中打开指定的网址的文章就介绍到这了,更多相关vue3新标签打开指定的网址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue指令的学习

    Vue指令的学习

    这篇文章主要介绍了Vue指令,Vue官网一共有提供了14个指令,下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下
    2021-10-10
  • Vue3打包部署报错的解决方案

    Vue3打包部署报错的解决方案

    这篇文章主要介绍了Vue3打包部署报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 基于Vue2.X的路由和钩子函数详解

    基于Vue2.X的路由和钩子函数详解

    下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)

    Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)

    近期在做一个vue3的项目,里面有个图表需求,因公司之前使用第三方封装的图表缺少文档,就去看了echars的官网文档,引入原生echars来实现,下面这篇文章主要给大家介绍了关于Vue3中使用echarts的简单七个步骤,需要的朋友可以参考下
    2023-01-01
  • Vue中四种操作dom方法保姆级讲解

    Vue中四种操作dom方法保姆级讲解

    这篇文章主要介绍了Vue中四种操作dom方法,首先,在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势:MVVM,在vue中程序员几乎不操作DOM,只需要维护好数据即可,vue给程序员提供ref引用,不调用api直接获取元素组件的使用
    2023-02-02
  • vue中axios封装使用的完整教程

    vue中axios封装使用的完整教程

    这篇文章主要给大家介绍了关于vue中axios封装使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue3使用深度选择器修改样式问题

    vue3使用深度选择器修改样式问题

    这篇文章主要介绍了vue3使用深度选择器修改样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue使用v-for数据渲染顺序混乱的原因及解决方案

    Vue使用v-for数据渲染顺序混乱的原因及解决方案

    在 Vue.js 中,使用 v-for 指令进行数据渲染时,有时会遇到渲染顺序混乱的问题,这种问题主要与 Vue 的响应式系统、DOM 更新机制以及数组的变更方法有关,以下是对这一现象的深入分析及解决方案,需要的朋友可以参考下
    2025-01-01
  • Vue编译器解析compile源码解析

    Vue编译器解析compile源码解析

    这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue3+Spring Framework框架开发实战

    Vue3+Spring Framework框架开发实战

    这篇文章主要为大家介绍了Vue3+Spring Framework框架开发实战详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04

最新评论