vue.js開發抓信插件,如何在單頁應用中打開新窗口

在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();
        }
                .......

這樣,就可以打開新頁面了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章