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è)功能！?。?/p>
到此這篇關(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.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目在env文件中設(shè)置的變量無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目在env文件中設(shè)置的變量無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js開(kāi)發(fā)環(huán)境的安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開(kāi)瀏覽器的方法匯總
這篇文章主要介紹了Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開(kāi)瀏覽器的多種實(shí)現(xiàn)方法，方法一比較適用于vue3，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-02-02
vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家介紹了Vue 2源碼解讀$mount原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue里面的el-select綁定默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Rsbuild,一個(gè)基于Rspack的高效Web構(gòu)建工具,將Rspack的強(qiáng)大功能與易用性相結(jié)合,是你項(xiàng)目搭建的不二之選,Rsbuild不僅提供了開(kāi)箱即用的體驗(yàn),還引入了高性能的構(gòu)建機(jī)制,本文給大家介紹了Vue2遷移Rsbuild詳細(xì)步驟,需要的朋友可以參考下2024-10-10
Vue中v-show添加表達(dá)式的問(wèn)題(判斷是否顯示)
這篇文章主要介紹了關(guān)于Vue中v-show中添加表達(dá)式用于判斷是否顯示的問(wèn)題,很多朋友經(jīng)常會(huì)遇到這樣的需求，有數(shù)據(jù)來(lái)源和標(biāo)簽類型兩行選項(xiàng)，需要實(shí)現(xiàn)點(diǎn)擊上面的某個(gè)數(shù)據(jù)來(lái)源時(shí)，標(biāo)簽類型自動(dòng)切換功能，感興趣的朋友一起看看吧2018-03-03