vue点击按钮打开新页签,并传参

10 篇文章 0 订阅

今天遇到一个新需求,需要打开新页签展示,之前用ruter.push都不管用,现在结合window.open和$router.resolve亲测有效
以下附上代码:

<div class="target" @click="ceshi" ref="target">测试</div>


ceshi() {
      let routeData = this.$router.resolve({
        path: "/tui",
        query: {
          name: "heihei",
          sex: "女"
        }
      });
      window.open(routeData.href, "_blank");
    }
Vue中,如果你想要在路由跳转时打开一个新页,通常使用的是`<router-link>`组件的`target`属性来实现。`target`属性用来指定链接打开的方式,它可以设置为`_blank`,这样点击链接时就会在新的页打开目标页面。 以下是一个简单的示例代码: ```html <router-link to="/some-path" target="_blank">打开新页</router-link> ``` 在这个例子中,当用户点击这个`<router-link>`组件时,浏览器会在新的页打开`/some-path`对应的路由页面。 需要注意的是,使用`<router-link>`的`target`属性实现新页打开功能时,它实际上是在HTML中创建了一个`<a>`标,`target="_blank"`是`<a>`标的标准属性。但是,当配合Vue Router的编程式导航时,比如使用`this.$router.push`方法,你需要手动创建一个`<a>`标,并设置其`target`属性为`_blank`,因为`this.$router.push`本身并不会创建`<a>`标。 示例代码如下: ```javascript this.$router.push('/some-path').catch(err => {}); ``` 这段代码并不会打开一个新页,而是进行路由跳转。如果你需要在编程式导航中打开新页,可以这样做: ```javascript const a = document.createElement('a'); a.href = this.$router.resolve('/some-path').href; a.target = '_blank'; document.body.appendChild(a).click(); ``` 这段代码会创建一个新的`<a>`标,设置其`href`属性为目标路由的完整路径,并将其`target`属性设置为`_blank`,然后将这个`<a>`标附加到`body`上,并模拟点击事件以在新页打开目标路由。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值