vue打开新html,vue在新窗口打开页面的方法

有时候后咱们会须要在一个新窗口打开页面,而咱们都知道,vue是单页面的应用,经过router在内部跳转的。可是依然有办法实现这个需求。vue

刚开始在网上找了一下,有两种方式,一种是给outer-link标签添加tag=a跳转打开新窗口,亲测有效。this

热门好货

再一种就是经过router来实现,使用resolve方法将路径转换出来,window来打开code

let routeData = this.$router.resolve({

name: "detail",

query: {goodsId:'1111'}

});

window.open(routeData.href, '_blank');

可是我按这种方式写的时候,却跳转到根路径去了component

路由配置:router

{

path: '/home/integral-record',

component: IntegralRecord,

meta: {

hasMaster: true,

name: '积分变动记录'

}

}

按理说routeData.href应该是/home/integral-record才对blog

但实际打印出来的倒是/shop/事件

cfcf5dc0704b5a1e9814249e11dca4ff.png

这就致使跳转到了首页去,这显然不是我想要的,暂时没找到缘由。可是当咱们必定想要用路由跳转的时候怎么办呢?路由

咱们小组长找到了一个方法:get

给a标签动态设置href路径,而后主动触发click事件来跳转。亲测有效io

就是在页面添加一个a标签,款高设为零或者隐藏,只要看不到就行,设置好target属性为_blank,href设为空

给目标元素绑定@click=“test”事件,当点击目标元素的时候触发:

test() {

let target = this.$refs.target

target.setAttribute('href', window.location.origin + '/home/integral-record')

target.click()

}

这样就成功在新窗口打开了页面

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值