在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();
}
.......
这样,就可以打开新页面了
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
本文名称:vue.js开发抓信插件,如何在单页应用中打开新窗口-创新互联
转载源于:https://www.cdcxhl.com/article28/jpdjp.html
成都网站建设公司_创新互联,为您提供定制网站、云服务器、网站导航、品牌网站设计、移动网站建设、手机网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联