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新标签打开指定的网址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

element中el-select的使用及说明
这篇文章主要介绍了element中el-select的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue项目实现一键网站换肤效果实例(webpack-theme-color-replacer的使用)
换皮肤一般都是点击一个按钮弹出一些皮肤的选项,选中选项后皮肤生效,下面这篇文章主要给大家介绍了关于vue项目实现一键网站换肤效果的相关资料,文中主要介绍的是webpack-theme-color-replacer的使用,需要的朋友可以参考下
2023-02-02
vue中.env文件配置环境变量的实现
本文主要介绍了vue中.env文件配置环境变量的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
一文带你详细了解Vue中的v-for
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下
2022-10-10
浅析vue 函数配置项watch及函数 $watch 源码分享
这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
在vue组件中使用axios的方法
下面小编就为大家分享一篇在vue组件中使用axios的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
从0到1搭建element后台框架优化篇(打包优化)
这篇文章主要介绍了从0到1搭建element后台框架优化篇(打包优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
一文详解如何创建Vue3项目及组合式API
Vue3提供了一种组合式API,可以用来构建可复用的组件和应用程序,下面这篇文章主要给大家介绍了关于如何创建Vue3项目及组合式API的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
Vue路由的懒加载深入详解
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下
2022-12-12
vue-router的HTML5 History 模式设置
这篇文章主要介绍了vue-router的HTML5 History模式设置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具