问题描述:
做项目时遇到一个需求:在新窗口打开要跳转的页面;
在代码实现层面表现为:使用$router.push或者$router.go在单击事件或者函数中实现页面跳转;但在vue2.0之后,它们不再支持_blank新窗口打开的属性;
解决方案:
方法一:
把路径拼接后,使用window.open()在新窗口打开页面
handleLinkDetail(value) {
// this.$router.push(`/detail/index?id=${value.id}&flag=1`);
let detailUrl = `#/detail/index?orgId=${value.id}&sourceFlag=1`
window.open(detailUrl, '_blank');
},
方法二:
使用$router.resolve,该方法会返回一个href属性的值,该值是一个带#的hash片段标识符,即是要跳转的路径;然后通过window.open在新窗口打开即可;
handleLinkDetail(value) {
// this.$router.push(`/detail/index?id=${value.id}&flag=1`);
let detailUrl = this.$router.resolve({
path: "/detail/index",
query: {
id: value.id,
flag: 1
}
});
//href: "#/detail/index?id=9643215113&sourceFlag=1"
window.open(detailUrl.href, '_blank');
},