在vue項目中實現跳轉到一個新窗口,有兩個方法:
1、<vue-link>標籤實現新窗口打開
官方文檔中說 v-link 指令被 <router-link> 組件指令替代,且 <router-link> 不支持 target="_blank" 屬性,如果需要打開一個新窗口必須要用<a>標籤,但事實上vue2版本的 <router-link> 是支持 target="_blank" 屬性的(tag="a"),如下:
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新頁面打開home頁</router-link>
2、編程式導航
可以使用this.$router.resolve解析出需要跳轉的url,然後用window.open打開,如下:
let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl.href, '_blank');
這種方法在抓信的安卓版本可用,但是發現在抓信iOS版本APP中無法打開新頁面。經過實踐發現,按照如下方法即可在抓信的iOS版本APP正常工作。
3, 用<a :href=variable target="_blank">
首先在頁面設置好超鏈接的跳轉代碼:
<a :href=url1 target="_blank">打開新窗口</a>
其中變量url1是頁面定義的變量:
export default {
data() {
return {
url1:"https://www.baidu.com"
}
},
methods: {
getURL() {
const url3= this.$router.resolve({
name:"guide",
params:{}
});
this.url1=url3.href;
}
},
mounted() {
this.getURL();
}
.......
這樣,就可以打開新頁面了