簡(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),真特么神奇哈,那可不可以寫成tag="a",
從而去替代a標(biāo)簽?zāi)??我們嘗試著寫一哈
<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)文章
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國(guó)際化方案就是根據(jù)它的規(guī)則自己建立一套語(yǔ)言字典,對(duì)于每一個(gè)字(message)都有一個(gè)統(tǒng)一的標(biāo)識(shí)符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解
這篇文章主要為大家介紹了使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06vue實(shí)現(xiàn)三級(jí)頁(yè)面跳轉(zhuǎn)功能
這篇文章主要介紹了vue實(shí)現(xiàn)三級(jí)頁(yè)面跳轉(zhuǎn)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05vue項(xiàng)目使用$router.go(-1)返回時(shí)刷新原來(lái)的界面操作
這篇文章主要介紹了vue項(xiàng)目使用$router.go(-1)返回時(shí)刷新原來(lái)的界面操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07