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') // 可以跳转

猜你喜欢

转载自blog.csdn.net/m0_53562074/article/details/126888902
今日推荐