众所周知,vue是单页面应用,那么如果我们碰到的需求是需要打开一个新的窗口呢
很明显,this.$router.push()和router-link是不行的,他们不会打开一个新的窗口
- 上代码
toNewPage(id) {
let deviceId = id //必要的参数
let routeData = this.$router.resolve({
name: 'Equipment',//需要打开的路由名称
query: {
deviceId: JSON.stringify(deviceId)//需要携带的参数
}
})
window.open(routeData.href, '_blank');
},
可能遇到的问题
- 上线访问不到
打开新的窗口可以看到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传参