首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Router新窗口打开

Vue Router实现新窗口打开的三种方法

2026-03-06 09:45:11 作者：爱写程序的小高

在Vue开发中,经常需要实现新窗口打开路由页面的需求,本文将系统介绍Vue Router中实现新窗口打开的三种主要方法,包括router-link组件方式、编程式导航方式和原生window.open方式,需要的朋友可以参考下

在Vue开发中，经常需要实现新窗口打开路由页面的需求。本文将系统介绍Vue Router中实现新窗口打开的三种主要方法，包括router-link组件方式、编程式导航方式和原生window.open方式。

一、router-link组件方式

最简单的方式是使用router-link组件的target="_blank"属性：

<template>
  <router-link 
    to="/new-page" 
    target="_blank"
    rel="noopener noreferrer"
  >
    打开新窗口
  </router-link>
</template>

特点：

简单直接
适合静态链接
需要添加rel="noopener noreferrer"防止安全漏洞

二、编程式导航方式

通过$router.resolve配合window.open实现：

<template>
  <button @click="openNewWindow">编程式导航打开</button>
</template>

<script>
export default {
  methods: {
    openNewWindow() {
      const route = this.$router.resolve({
        path: '/new-page',
        query: { id: 123 }
      });
      window.open(route.href, '_blank', 'noopener,noreferrer');
    }
  }
}
</script>

特点：

最推荐的方式
保持路由配置一致性
支持动态参数传递

三、原生window.open方式

直接拼接完整URL实现：

<template>
  <button @click="nativeOpenNewWindow">原生方式打开</button>
</template>

<script>
export default {
  methods: {
    nativeOpenNewWindow() {
      window.open(
        `${window.location.origin}/new-page?id=123`,
        '_blank',
        'noopener,noreferrer'
      );
    }
  }
}
</script>

特点：

简单直接
适用于简单场景
需要手动处理URL拼接

路由配置示例

import Vue from 'vue'
import Router from 'vue-router'
import NewPage from '../views/NewPage.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/new-page',
      name: 'NewPage',
      component: NewPage
    }
  ]
})

参数传递对比

方法	参数传递方式	适用场景
router-link	通过`:to`绑定对象	静态链接
编程式导航	通过query对象	动态参数
原生window.open	URL拼接	简单场景

到此这篇关于Vue Router实现新窗口打开的三种方法的文章就介绍到这了,更多相关Vue Router新窗口打开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！