vue 跳转页面打开浏览器新窗口或者打开新标签

最新推荐文章于 2025-03-17 14:44:48 发布

盐多碧咸。。

最新推荐文章于 2025-03-17 14:44:48 发布

阅读量4.4k

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Z18834071903/article/details/138191246

版权

本文介绍了如何在Vue应用中使用`window.open`方法，分别通过`openNewWindow`和`openNewTab`函数实现跳转到指定页面时在浏览器中打开新窗口或新标签页，同时提及了路由路径和参数的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 跳转页面打开浏览器新窗口或者打开新标签

打开浏览器新窗口方法：

openNewWindow () {
   // 打开新窗口
   let left = ((window.screen.width / 2) - 180) / 2   // 新窗口居中
   let width = (window.screen.width / 2) + 180        // 新窗口的宽度
   // 新窗口要设置的参数
   let params = `height=${window.screen.height},width=${width},top=0,left=${left},toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=yes,status=no`
   window.open(`/testPage/${this.title}/${this.id}/${this.type}/${this.date}`,'_blank',params)},
    
   // 注意：路由地址的 path 必须配置成以下这样，有几个参数就配置几个参数
   // path : '/testPage/:title/:id/:type/:date'

打开新标签页方法：

 openNewTab () {
    // 打开新标签
    let routeData = this.$router.resolve(({
    path: '/testPage', // path 要跳转的路由地址
    // query 要传递的参数
    query: { 
       title: this.title,
       id: this.id,
       type: this.type,
       date: this.date，
     }
    }))
    window.open(routeData.href,'_blank')
 },