簡述vue路由打開一個新的窗口的方法
更新時間：2018年11月29日 08:51:52 作者：pinbolei
這篇文章主要介紹了vue路由打開一個新的窗口的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
簡單說一下vue路由如何打開一個新的窗口
1.router-link標簽
在vue的官方文檔中
看到這大家應該會想，既然router-link不支持target="_blank"屬性，那我們該怎么用router-link打開一個新的窗口呢？別急，繼續(xù)往下看~
文檔中還有一處描述
router-link添加tag="li"屬性后，居然可以變成li標簽渲染出來，真特么神奇哈，那可不可以寫成tag="a",從而去替代a標簽呢？我們嘗試著寫一哈
<router-link tag="a" target="_blank" to="/about">新品</router-link>
2.編程導航
上圖是官網(wǎng)的最新說法，vue2.0以后router.go和router.push就不支持新窗口打開的屬性了，現(xiàn)在用一種新的方式router.resolve
let routeData = this.$router.resolve({
path: "/about",
query: {
name:'lei',
age: 18,
phoneNum:12345678901
}
});
window.open(routeData.href, '_blank');
總結
以上所述是小編給大家介紹的vue路由打開一個新的窗口的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue使用require.context實現(xiàn)動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實現(xiàn)動態(tài)注冊路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標識符,下面這篇文章主要給大家介紹了關于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了使用Vite+Vue3+Vant全家桶快速構建項目步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家詳細介紹了vue圖片加載與顯示默認圖片的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在Web應用程序中,實現(xiàn)拖拽和排序功能是非常常見的需求,本文為大家介紹了如何使用Vue來實現(xiàn)一個簡單但功能強大的拖拽與排序功能,感興趣的小伙伴可以參考下2023-10-10
這篇文章主要介紹了vue實現(xiàn)三級頁面跳轉功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
vue項目使用$router.go(-1)返回時刷新原來的界面操作
這篇文章主要介紹了vue項目使用$router.go(-1)返回時刷新原來的界面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了淺談 Vue 項目優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue項目中使用Vux的安裝過程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05