vue router點擊打開新的標簽頁的方法(最新推薦)
vue router點擊打開新的標簽頁的方法
只需要在router-link中加入target="_blank"即可在新的頁面打開標簽！
<router-link
:to="{
name: 'TrvalPlan',
params: {
fromCity: planInfo.fromCity,
backCity: planInfo.backCity,
goDate: planInfo.goDate,
},
}"
target="_blank"
class="thm-btn tour-search-one__btn">注意：但是這樣會導致路由傳參失效，因為一旦刷新，路由傳參就失效了
vue-router跳轉(zhuǎn)時打開新頁面的兩種方法
1、標簽實現(xiàn)新窗口打開
官方文檔中說 v-link 指令被 組件指令替代，且 不支持 target="_blank" 屬性，如果需要打開一個新窗口必須要用 < a > 標簽，但事實上vue2版本的 是支持 target="_blank" 屬性的(tag=“a”)，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新頁面打開home頁</router-link>2、編程式導航
有些時候需要在單擊事件或者在函數(shù)中實現(xiàn)頁面跳轉(zhuǎn)，那么可以借助router的示例方法，通過編寫代碼實現(xiàn)。我們常用的是 $router.push 和 r o u t e r . g o 但 是 v u e 2.0 以 后 ， 這 種 方 式 就 不 支 持 新 窗 口 打 開 的 屬 性 了 ， 這 個 時 候 就 需 要 使 用 t h i s . router.go 但是vue2.0以后，這種方式就不支持新窗口打開的屬性了，這個時候就需要使用this.router.go但是vue2.0以后，這種方式就不支持新窗口打開的屬性了，這個時候就需要使用this.router.resolve,如下：
seeShare(){
? ?let routeUrl = this.$router.resolve({
? ? ?path: "/share",
? ? ?query: {id:96}
? ?});
? ?window.open(routeUrl.href, '_blank');
}到此這篇關(guān)于vue router點擊打開新的標簽頁的方法的文章就介紹到這了,更多相關(guān)vue router點擊打開新的標簽頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue嵌入本地iframe文件并獲取某元素的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了Vue自定義指令實現(xiàn)卡片翻轉(zhuǎn)功能的代碼示例,文章通過代碼示例講解的非常詳細,對大家的學習或工作有一定的參幫助,需要的朋友可以參考下2023-11-11
在Vue中,可以使用多種方式來處理cookie和本地存儲,不同的方法還有不同的特點和適用場景,本文主要介紹了這些方法的對比和使用場景,希望對大家有所幫助2023-08-08
Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue項目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
最近在學習vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue中引用assets中圖片的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
Hexo已經(jīng)看膩了，來手把手教你使用VuePress搭建個人博客
vuepress是尤大大4月12日發(fā)布的一個全新的基于vue的靜態(tài)網(wǎng)站生成器，實際上就是一個vue的spa應用，內(nèi)置webpack，可以用來寫文檔。這篇文章給大家介紹了VuePress搭建個人博客的過程，感興趣的朋友一起看看吧2018-04-04