vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法(最新推薦)
vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法
只需要在router-link中加入target="_blank"即可在新的頁(yè)面打開標(biāo)簽！
<router-link
:to="{
name: 'TrvalPlan',
params: {
fromCity: planInfo.fromCity,
backCity: planInfo.backCity,
goDate: planInfo.goDate,
},
}"
target="_blank"
class="thm-btn tour-search-one__btn">注意：但是這樣會(huì)導(dǎo)致路由傳參失效，因?yàn)橐坏┧⑿拢酚蓚鲄⒕褪Я?/p>
vue-router跳轉(zhuǎn)時(shí)打開新頁(yè)面的兩種方法
1、標(biāo)簽實(shí)現(xiàn)新窗口打開
官方文檔中說 v-link 指令被 組件指令替代，且 不支持 target="_blank" 屬性，如果需要打開一個(gè)新窗口必須要用 < a > 標(biāo)簽，但事實(shí)上vue2版本的 是支持 target="_blank" 屬性的(tag=“a”)，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新頁(yè)面打開home頁(yè)</router-link>2、編程式導(dǎo)航
有些時(shí)候需要在單擊事件或者在函數(shù)中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，那么可以借助router的示例方法，通過編寫代碼實(shí)現(xiàn)。我們常用的是 $router.push 和 r o u t e r . g o 但 是 v u e 2.0 以 后 ， 這 種 方 式 就 不 支 持 新 窗 口 打 開 的 屬 性 了 ， 這 個(gè) 時(shí) 候 就 需 要 使 用 t h i s . router.go 但是vue2.0以后，這種方式就不支持新窗口打開的屬性了，這個(gè)時(shí)候就需要使用this.router.go但是vue2.0以后，這種方式就不支持新窗口打開的屬性了，這個(gè)時(shí)候就需要使用this.router.resolve,如下：
seeShare(){
? ?let routeUrl = this.$router.resolve({
? ? ?path: "/share",
? ? ?query: {id:96}
? ?});
? ?window.open(routeUrl.href, '_blank');
}到此這篇關(guān)于vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法的文章就介紹到這了,更多相關(guān)vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue mixins合并策略以及應(yīng)用場(chǎng)景分析
這篇文章主要介紹了vue mixins合并策略以及應(yīng)用場(chǎng)景,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了封裝Vue Element的table表格組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-08-08
vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
本篇文章主要介紹了vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue使用WEB自帶TTS實(shí)現(xiàn)語音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實(shí)現(xiàn)語音文字互轉(zhuǎn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的解決
這篇文章主要介紹了vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
解決ant-design-vue安裝報(bào)錯(cuò)的問題
這篇文章主要介紹了解決ant-design-vue安裝報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了前端虛擬列表實(shí)現(xiàn)的思路及完整代碼,虛擬列表是一種優(yōu)化長(zhǎng)列表性能的技術(shù),通過只渲染可視區(qū)域的列表項(xiàng)來提升頁(yè)面性能和用戶體驗(yàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
Vue3中PropType是TypeScript類型工具,用于定義組件props的類型,基本用法包括簡(jiǎn)單類型、對(duì)象、數(shù)組和函數(shù)定義,高級(jí)用法涉及聯(lián)合類型、嵌套對(duì)象和函數(shù)類型,本文介紹Vue3中PropType的使用指南,感興趣的朋友跟隨小編一起看看吧2026-01-01