Vue路由跳转打开新窗口 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 Vue路由跳转打开新窗口

Vue路由跳转打开新窗口

更新时间:2021-09-02 10:24:32 来源:极悦 浏览4936次

需求

因为某些原因,某个页面的加载需要很长时间。为了不让用户重新加载,再次等待很长时间,决定当从这个页面跳转其他页面时,打开一个新窗口。

编程时导航

使用路由对象的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>标签

<router-link tag="a" 
             target="_blank"
             :to="{ name: 'router-name', query: {id: 1} }">
</router-link>

以上就是极悦小编介绍的"Vue路由跳转打开新窗口",希望对大家有帮助,想了解更多可查看编程入门教程。极悦在线学习教程,针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识,让同学们更好更方便的学习和了解Java编程,感兴趣的同学可以关注一下。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>