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