当前位置：首页 > VUE

vue实现新窗口路由

2026-01-21 22:17:10VUE

vue实现新窗口路由的方法

在Vue项目中实现新窗口打开路由可以通过以下几种方式完成：

使用router.resolve方法

通过Vue Router的resolve方法解析路由路径，生成完整URL后使用window.open打开新窗口。

vue实现新窗口路由

const routeData = this.$router.resolve({ path: '/target-path' })
window.open(routeData.href, '_blank')

使用router-link组件

在模板中直接使用router-link组件，添加target="_blank"属性。

vue实现新窗口路由

<router-link :to="{ path: '/target-path' }" target="_blank">打开新窗口</router-link>

使用window.open直接打开

对于已配置好base路径的项目，可以直接拼接完整路径。

window.open(`${window.location.origin}/#/target-path`, '_blank')

使用a标签手动构建

在模板中使用原生a标签，通过计算属性生成完整URL。

<a :href="fullUrl" target="_blank">打开新窗口</a>

computed: {
  fullUrl() {
    return `${window.location.origin}/#${this.$route.path}`
  }
}

注意事项

确保目标路由已在路由配置中正确定义
使用hash模式时URL需要包含#符号
新窗口打开的页面会创建新的Vue实例和路由实例
可能需要处理跨窗口通信或状态共享问题

标签: 路由新窗口

分享给朋友：

vue实现路由

Vue 路由的实现方法 Vue 路由可以通过 Vue Router 库来实现，Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。安装 Vue Router 通…

vue 路由实现

Vue 路由实现方法 Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。以下是实现 Vue 路由的基本步骤：安装 Vue Router 使用 npm 或 ya…

php 路由实现

PHP 路由实现方法在 PHP 中实现路由功能有多种方式，以下是几种常见的实现方法：使用原生 PHP 实现通过解析 URL 并匹配对应的控制器和动作： $request = $_SERVER…

js实现路由

js实现路由的方法在JavaScript中实现路由功能可以通过多种方式完成，以下是几种常见的方法：使用原生JavaScript实现路由通过监听window.onhashchange事件来实现基…

vue实现路由组件

Vue 实现路由组件的方法在 Vue 中实现路由功能通常需要结合 Vue Router 库，以下是具体实现步骤：安装 Vue Router 通过 npm 或 yarn 安装 Vue Router…

vue实现tab路由

Vue 实现 Tab 路由的方法在 Vue 中实现 Tab 路由通常需要结合 Vue Router 和动态组件或条件渲染。以下是几种常见方法：使用 Vue Router 动态路由配置路由文件…

vue实现新窗口路由