vue router點(diǎn)擊打開新的標(biāo)簽頁的方法(最新推薦)
vue router點(diǎn)擊打開新的標(biāo)簽頁的方法
只需要在router-link中加入target="_blank"即可在新的頁面打開標(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í)打開新頁面的兩種方法
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'}}">新頁面打開home頁</router-link>2、編程式導(dǎo)航
有些時(shí)候需要在單擊事件或者在函數(shù)中實(shí)現(xiàn)頁面跳轉(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)簽頁的方法的文章就介紹到這了,更多相關(guān)vue router點(diǎn)擊打開新的標(biāo)簽頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue嵌入本地iframe文件并獲取某元素的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能
這篇文章主要給大家介紹了Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能的代碼示例,文章通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的參幫助,需要的朋友可以參考下2023-11-11
在Vue中,可以使用多種方式來處理cookie和本地存儲(chǔ),不同的方法還有不同的特點(diǎn)和適用場景,本文主要介紹了這些方法的對(duì)比和使用場景,希望對(duì)大家有所幫助2023-08-08
Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue項(xiàng)目判斷開發(fā)、測試、正式環(huán)境過程
這篇文章主要介紹了Vue項(xiàng)目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue中引用assets中圖片的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue中引用assets中圖片的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Hexo已經(jīng)看膩了，來手把手教你使用VuePress搭建個(gè)人博客
vuepress是尤大大4月12日發(fā)布的一個(gè)全新的基于vue的靜態(tài)網(wǎng)站生成器，實(shí)際上就是一個(gè)vue的spa應(yīng)用，內(nèi)置webpack，可以用來寫文檔。這篇文章給大家介紹了VuePress搭建個(gè)人博客的過程，感興趣的朋友一起看看吧2018-04-04