vue里面打开新的标签页

众所周知,vue是单页面应用,那么如果我们碰到的需求是需要打开一个新的窗口呢
很明显,this.$router.push()和router-link是不行的,他们不会打开一个新的窗口

  1. 上代码
    toNewPage(id) {
      let deviceId = id //必要的参数
      let routeData = this.$router.resolve({
        name: 'Equipment',//需要打开的路由名称
        query: {
          deviceId: JSON.stringify(deviceId)//需要携带的参数
        }
      })
      window.open(routeData.href, '_blank');
    },

可能遇到的问题

  1. 上线访问不到
    打开新的窗口可以看到href会默认加一层/static的路径,这样导致打包后线上环境找不到所访问的地址(http404)。解决方法:我通过window.location来取路径,这个路径是不变的。因为我需要拼接参数,所以我先截取了一下地址,实例如下:
  let sfAddress= _.split(window.location.href, '?', 2);
  let presAdress=sfAddress[0]+`?index=${index}&status=${hisPres.audit_status}`;
  window.open(presAdress, '_blank')

2.不要使用params传参

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容