vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue在新窗口打开页面

vue如何在新窗口打开页面

作者:donggua_123

这篇文章主要介绍了vue如何在新窗口打开页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue在新窗口打开页面

有时候后我们会需要在一个新窗口打开页面,而我们都知道,vue是单页面的应用,通过router在内部跳转的。

但是依然有办法实现这个需求。

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

<router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'1111'}}">热门好货</router-link>

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

let routeData = this.$router.resolve({
   name: "detail",
   query: {goodsId:'1111'}
});
window.open(routeData.href, '_blank');

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

路由配置

        {
          path: '/home/integral-record',
          component: IntegralRecord,
          meta: {
            hasMaster: true,
            name: '积分变更记录'
          }
        }

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

但实际打印出来的却是/shop/

这就导致跳转到了首页去,这显然不是我想要的,暂时没找到原因。但是当我们一定想要用路由跳转的时候怎么办呢?

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

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

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

<a class="target" href="" target=" rel="external nofollow" _blank"></a>

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

test() {
        let target = this.$refs.target
        target.setAttribute('href', window.location.origin + '/home/integral-record')
        target.click()
      }

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文