vue3實(shí)現(xiàn)在新標(biāo)簽中打開(kāi)指定網(wǎng)址的方法
更新時(shí)間：2024年07月25日 09:49:36 作者：Python私教
我希望點(diǎn)擊查看按鈕的時(shí)候,能夠在新的標(biāo)簽頁(yè)面打開(kāi)這個(gè)文件的地址進(jìn)行預(yù)覽,該如何實(shí)現(xiàn)呢,下面小編給大家?guī)?lái)了基于vue3實(shí)現(xiàn)在新標(biāo)簽中打開(kāi)指定的網(wǎng)址,感興趣的朋友跟隨小編一起看看吧
有一個(gè)文件列表，如下圖：
我希望點(diǎn)擊查看按鈕的時(shí)候，能夠在新的標(biāo)簽頁(yè)面打開(kāi)這個(gè)文件的地址進(jìn)行預(yù)覽，該如何實(shí)現(xiàn)呢？
比如：
實(shí)際上要實(shí)現(xiàn)這個(gè)并不難，參考demo如下：
首先，給按鈕綁定點(diǎn)擊事件：
<a-button
size="small"
type="primary"
@click="handleView(record)"
>
查看
</a-button>然后，實(shí)現(xiàn)點(diǎn)擊方法：
const handleView = (record) => {
const url = `/api/download/${record.uuid}_${record.name}`
window.open(url, "_blank")
}最終就實(shí)現(xiàn)了這個(gè)功能?。?！
到此這篇關(guān)于vue3實(shí)現(xiàn)在新標(biāo)簽中打開(kāi)指定的網(wǎng)址的文章就介紹到這了,更多相關(guān)vue3新標(biāo)簽打開(kāi)指定的網(wǎng)址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue指令，Vue官網(wǎng)一共有提供了14個(gè)指令，下面我們就來(lái)詳細(xì)講解每一個(gè)指令的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了Vue3打包部署報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
下面小編就為大家分享一篇基于Vue2.X的路由和鉤子函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中四種操作dom方法，首先，在vue中強(qiáng)烈禁用原生與jquery來(lái)操作DOM元素。我們要充分的利用vue的優(yōu)勢(shì)：MVVM，在vue中程序員幾乎不操作DOM，只需要維護(hù)好數(shù)據(jù)即可，vue給程序員提供ref引用，不調(diào)用api直接獲取元素組件的使用2023-02-02
這篇文章主要給大家介紹了關(guān)于vue中axios封裝使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue3使用深度選擇器修改樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進(jìn)行數(shù)據(jù)渲染時(shí),有時(shí)會(huì)遇到渲染順序混亂的問(wèn)題,這種問(wèn)題主要與 Vue 的響應(yīng)式系統(tǒng)、DOM 更新機(jī)制以及數(shù)組的變更方法有關(guān),以下是對(duì)這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下2025-01-01
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue3+Spring Framework框架開(kāi)發(fā)實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3+Spring Framework框架開(kāi)發(fā)實(shí)戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04