一. <router-link>標(biāo)簽實現(xiàn)新窗口打開:
官方文檔中說 v-link 指令被 <router-link> 組件指令替代湾笛,且 <router-link> 不支持 target="_blank" 屬性鲤桥,如果需要打開一個新窗口必須要用<a>標(biāo)簽,但事實上vue2版本的 <router-link> 是支持 target="_blank" 屬性的(tag="a"),示例如下:
<router-link tag="a" target="_blank" :to="{name:'searchGoods',params:{catId:0},query:{keywords:'手機'}}">熱門好貨</router-link>
注:只有tag="a"模式下 target="_blank" 屬性才會生效稚照。
二. 編程式導(dǎo)航:
有些時候需要在單擊事件或者在函數(shù)中實現(xiàn)頁面跳轉(zhuǎn),那么可以借助router的示例方法,通過編寫代碼實現(xiàn)刚夺。我們常用的是 router.go ,但是vue2.0以后,這種方式就不支持新窗口打開的屬性了末捣。這兩種平常用的都比較多侠姑,這里就不再贅述。百度了下箩做,找到了使用 $router.resolve 這種方法能夠?qū)崿F(xiàn)新窗口打開莽红,示例代碼如下:
let routeData = this.$router.resolve({
name: "searchGoods",
query: params,
params:{catId:params.catId}
});
window.open(routeData.href, '_blank');