簡(jiǎn)述vue路由打開(kāi)一個(gè)新的窗口的方法
簡(jiǎn)單說(shuō)一下vue路由如何打開(kāi)一個(gè)新的窗口
1.router-link標(biāo)簽
在vue的官方文檔中
看到這大家應(yīng)該會(huì)想，既然router-link不支持target="_blank"屬性，那我們?cè)撛趺从胷outer-link打開(kāi)一個(gè)新的窗口呢？別急，繼續(xù)往下看~
文檔中還有一處描述
router-link添加tag="li"屬性后，居然可以變成li標(biāo)簽渲染出來(lái)，真特么神奇哈，那可不可以寫(xiě)成tag="a",從而去替代a標(biāo)簽?zāi)?？我們嘗試著寫(xiě)一哈
<router-link tag="a" target="_blank" to="/about">新品</router-link>
2.編程導(dǎo)航
上圖是官網(wǎng)的最新說(shuō)法，vue2.0以后router.go和router.push就不支持新窗口打開(kāi)的屬性了，現(xiàn)在用一種新的方式router.resolve
let routeData = this.$router.resolve({
path: "/about",
query: {
name:'lei',
age: 18,
phoneNum:12345678901
}
});
window.open(routeData.href, '_blank');
總結(jié)
以上所述是小編給大家介紹的vue路由打開(kāi)一個(gè)新的窗口的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果,從而達(dá)到顯示計(jì)時(shí)器滾動(dòng)效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
Vue-router如何實(shí)現(xiàn)路由懶加載
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js憑借其輕量級(jí)和易用性,成為了很多開(kāi)發(fā)者的首選框架,本文將結(jié)合實(shí)際案例,詳細(xì)講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
Vue項(xiàng)目在IE瀏覽器的兼容問(wèn)題及解決方法
該文章主要介紹了如何在Vue項(xiàng)目中解決IE瀏覽器的兼容性問(wèn)題,包括解決IE不兼容axios的Promise對(duì)象、ES6語(yǔ)法以及polyfill的使用方法,通過(guò)配置babel-polyfill、es6-promise和轉(zhuǎn)ES5語(yǔ)法,解決了在IE瀏覽器中常見(jiàn)的兼容性問(wèn)題,需要的朋友可以參考下2025-01-01
vue3+ts+EsLint+Prettier規(guī)范代碼的方法實(shí)現(xiàn)
本文主要介紹在Vue3中使用TypeScript做開(kāi)發(fā)時(shí)，如何安裝與配置EsLint和Prettier，以提高編碼規(guī)范。感興趣的可以了解一下2021-10-10
vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求，這篇文章主要介紹了vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
vue的$http的get請(qǐng)求要加上params操作
這篇文章主要介紹了vue的$http的get請(qǐng)求要加上params操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
elementUI Pagination 分頁(yè)指定最大頁(yè)的問(wèn)題及解決方法(page-count)
項(xiàng)目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬(wàn)條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁(yè)指定最大頁(yè)的問(wèn)題及解決方法(page-count),需要的朋友可以參考下2024-08-08
vue3修改link標(biāo)簽?zāi)J(rèn)icon無(wú)效問(wèn)題詳解
這篇文章主要介紹了vue3修改link標(biāo)簽?zāi)J(rèn)icon無(wú)效問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10