Vue路由跳转打开新窗口
使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。因为某些原因,某个页面的加载需要很长时间。为了不让用户重新加载,再次等待很长时间,决定当从这个页面跳转其他页面时,打开一个新窗口。
·
需求
因为某些原因,某个页面的加载需要很长时间。为了不让用户重新加载,再次等待很长时间,决定当从这个页面跳转其他页面时,打开一个新窗口。
编程时导航
使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。
当页面有一个跳转时
const { href } = this.$router.resolve({
name: "router-name",
query: {
id: 1
}
});
window.open(href, '_blank');
当页面有多个跳转时
let routeOne = this.$router.resolve({
name: "router-one",
query: {
id: 1
}
});
window.open(routeOne.href, '_blank');
let routeTwo = this.$router.resolve({
name: "router-two",
query: {
id: 1
}
});
window.open(routeTwo.href, '_blank');
标签
<router-link tag="a"
target="_blank"
:to="{ name: 'router-name', query: {id: 1} }">
</router-link>
更多推荐
已为社区贡献3条内容
所有评论(0)