this.$router.resolve() 方法 （非 hash 模式 window.open() 打开页面）

【问题描述】

• 路由模式从 hash 模式换为 history 模式 window.open() 不能跳转了

【解决】

• 借助 this.$router.resolve() 方法 给路径拼接上 #/ 。

• const { href } = this.$router.resolve({path:`/home/?aaa=${ev.aaa}&bbb=${ev.bbb}`})
  window.open(href, '_blank') // _blank 打开新的页面
  

【补充】this.$router.resolve({ path: '123' }) 返回值：

• {
      "location": {
          "_normalized": true,
          "path": "/123",
          "query": {},
          "hash": "",
          "params": {}
      },
      "route": {
          "name": null,
          "meta": {},
          "path": "/123",
          "hash": "",
          "query": {},
          "params": {},
          "fullPath": "/123",
          "matched": []
      },
      "href": "#/123",  // 【要用】
      "normalizedTo": {
          "_normalized": true,
          "path": "/123",
          "query": {},
          "hash": "",
          "params": {}
      },
      "resolved": {
          "name": null,
          "meta": {},
          "path": "/123",
          "hash": "",
          "query": {},
          "params": {},
          "fullPath": "/123",
          "matched": []
      }
  }
  

【设想】

手动在 window.open() 中的路径前加上 #/ 应该也可以（但是测试环境不知道返回的 href 是什么，可能不一样）

【补充】路由不能跳转可能还有一个原因

window.open() 跳转的连接需要加上 http://

window.open('www.baidu.com') // 跳转不过去，跳转的地址是 http://localhost:8080/guangxi-corps/www.baidu.com 为 404
window.open('http://www.baidu.com') // 可以跳转