温馨提示×

您好,登录后才能参与点赞哦!

  • 密码登录
  • 手机登录
×
其他方式登录
注册×
  • 首页 > 
  • 开发技术 > 
  • vue.js开发抓信插件,如何在单页应用中打开新窗口

vue.js开发抓信插件,如何在单页应用中打开新窗口

发布时间:2020-06-30 19:36:14 来源:51CTO 阅读:428 作者:北京看看 栏目:开发技术

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

这样,就可以打开新页面了

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部