vue-router 打开新窗口新tab页

最新推荐文章于 2025-09-26 10:04:29 发布
原创 最新推荐文章于 2025-09-26 10:04:29 发布 · 1.1w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vuerouter #新窗口 #vue路由 #vue-router #resolve

本文介绍在Vue项目中如何使用<router-link>和vue-router的resolve()方法实现在新标签页中打开链接。通过设置target属性为_blank或使用resolve()方法配合window.open()，可以轻松实现此功能。

有时候需求需要点击某个按钮能新开一个tab页显示内容，有两种方式可以实现。
一：<router-link></router-link>

//关键点：target="_blank"
<router-link target="_blank" to="/sys/setting">系统设置</router-link>

二：vue-router提供的**resolve()**方法

const {href} = Router.resolve({
	path: '/sys/setting'
});
window.open(href, '_blank');
vue打开新窗口并且实现传参，有图有真相
m0_70960708的博客
10-25 367
我要实现的功能是打开一个新窗口用来展示新页面，而且需要传参数，并且参数不能显示在地址栏里面，而且当我刷新页面的时候，传过来的参数不能丢失，要一直存在，除非我手动关闭这个新窗口，即浏览器的标签页。通过面向百度编程，发现网上的根本达不到这个效果，而且还都是坑，明明实现不了，还若有其事的写出来，于是我在标题特意加上有图有真相，诚我不欺，实现不了功能，就不要出来糊弄人。方法，这种方法的打开窗口，是把当前A页面替换成要跳转过去的B页面，我打开新窗口是想看新东西，这倒好，直接让我之前的页面没了，这不操蛋嘛？
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 8627
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
vue 若依 新开tab 不关闭旧的tab
qq_40603125的博客
03-19 1516
router.js配置。
vue-router实现tab标签页（单页面）详解
12-29
vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。 首先，.vue中的内容非常简单，<router>创建标签，并指定路径，<router>渲染路由匹配到的组件。 <template> <div id=account> <p class=tab> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-li
[vue-router] vue3 打开浏览器的新标签页
qq_14993591的博客
09-26 282
使用router中的resolve，该方法返回的对象中包含完整的路径信息，然后借助于window.open打开新的标签页。
vue项目打开新的tab页面实现自动登录
技术刚刚好
01-03 1174
我们自己有一个vue项目，想在这个项目里面打开一个新的页面，这个新的页面是另外一个系统的网页，需要登录，我们想通过我们网站跳转过去，然后自动填写另外一个网站的账号，密码，点击登录，全部过程都是自动的。在上述代码中，您需要根据您登录页面的具体情况，使用JavaScript操作获取账号和密码输入框的元素，并填写对应的值。在上述清单文件中，我们声明了需要的权限（`"tabs"`和`"activeTab"`），并将`content.js`脚本注入到您的Vue项目的网页中。"name": "自动登录插件",
vue-router打开新的tab页
zq15517069607的博客
05-11 1641
const path = '/approval' const { href } = this.$router.resolve({ path, query: { id: res.data }}) window.location.href = href
vue-router在新窗口打开页面
热门推荐
weixin_68966058的博客
09-04 1万+
需要注意的是，router-link并不支持 target="_blank"属性，所以需要tag=“xxx”属性把router-link渲染成标签。有些时候需要在点击事件或者函数中实现页面跳转到新的界面，这时候就可以通过router.resolve()来实现。设计的渐进式框架，但是有时候在项目中也会出现新窗口打开页面的情况，此时，就需要用vue-router来解决。
vue跳转方式（打开新页面）及传参操作示例
12-28
本文实例讲述了vue跳转方式（打开新页面）及传参操作。分享给大家供大家参考，具体如下： 1. router-link跳转 // 直接写上跳转的地址 <router to=/detail/one> <span class=spanfour>link跳转 </router> // 添加...
若依前后端分离新窗口打开页面，如何使用this.$router.resolve解决
一米阳光的博客
11-21 6903
若依框架菜单打开新窗口展示页面，使用this.$router.resolve解决，详细步骤，一看就会
VueRouter(自定义VueRourter、使用方法、router-view\link、传递参数、路由嵌套、重定向、路由拦截（全局和局部守卫）、命名路由、路由模式（原理）、路由懒加载）
AIWWY的博客
06-01 2699
目录 VueRouter(router) VueRouter引入链接 使用方法 router-view标签 name属性（命名视图） router-link标签 传递参数形式 嵌套路由 重定向 路由拦截 全局前置守卫 全局后置钩子 局部守卫 命名路由 路由模式（history） 路由原理 路由懒加载 VueRouter(router) 和v-if/v-show一样，是用来切换组件的显示，Vue Router是通过哈希来切换（#/xxx），且能够在切换的时候传递参数。注意
vue3 的router跳转 - 页面同tab跳转和打开新tab跳转
不想起床
04-28 3825
vue3 路由 当前tab跳转和打开新tab跳转
vue项目新打开一个tab页或者新窗口的方法
11-04 1265
router.resolve：返回一个路由地址的规范化版本。同时包含一个包含任何现有 base 的 href 属性。默认情况下，用于 router.currentRoute 的 currentLocation 应该在特别高阶的用例下才会被覆写。
Router 新 tab 页打开
qq_45747074的博客
03-14 470
【代码】Router 新 tab 页打开。
vue3项目中，路由跳转，新开一个浏览器tab条
lj_1598的博客
12-25 340
vue3项目中，路由跳转，新开一个浏览器tab条
vue3 route跳转的new tab两种方式
三劫散仙
06-16 3081
Vue有两种类型的应用SPA和MAP，本文主要介绍的是SPA类型下面的使用方法。
vue-router 如何在新窗口打开页面
xqhys的博客
03-04 2582
1. <router-link>标签实现新窗口打开： 官方文档中说v-link指令已经被一个新的<router-link> 组件指令替代，这一部分的工作已经被 Vue 2 中的组件完成。 注意：<router-link>不支持target="_blank"，如果你想打开一个新标签页，你必须用<a>标签。 但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，如下： ...
vue技巧：从A页面跳转到B页面tab选项卡的第一个页面
m0_67841039的博客
05-27 251
vue技巧：从A页面跳转到B页面tab选项卡的第一个页面
前端点击按钮开启新页面(Ant Design)
chou_kawaii的博客
04-03 3036
组件中添加了三个ContactView的网格布局组件,每个ContactView展示不同的新组件内容。2、组件文件里(ContactDetail.tsx)创建组件内容。4、在数据对象文件里(data.ts)创建第三步里的VO对象。5、在需要添加点击开启新页面的按钮里设置跳转的路由网址。1、路由文件里(route.tsx)创建好路由。3、编写ContactView.tsx组件。
vue2 如何跳转页面再新页面打开
最新发布
10-18
<think>首先，用户的问题是：“我想查找在Vue2中实现页面跳转并在新页面打开的方法”。这是一个具体的问题，我需要基于提供的参考引用来回答。引用是站内引用，我必须从中提取相关信息。 回顾引用： - 引用[1]：讨论Vue3的实现，但用户问的是Vue2。所以这可能不太相关，但可以间接参考。 - 引用[2]：直接提到Vue2，说在Vue2中，$router.push 和 $router.go 不支持新窗口打开，需要用 this.$router.resolve 方法。 - 引用[3]：提到Vue2和Vue3中路由跳转与打开新窗口携带参数，给出了三种方法：使用 this.$router.resolve 和 window.open；router.resolve 和 window.open；以及 router-link 的 target="_blank" 属性。 - 引用[4]：是关于Vue3的页面跳转使用 router-link，不直接相关。 关键点是用户需要Vue2的实现方法。从引用[2]和[3]，我可以提取出方法。 引用[2]说：“有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve,如下：” 然后引用[3]提供了具体代码： - 第一种方法：使用 this.$router.resolve 和 window.open。 - 第二种方法：类似，使用 router.resolve。 - 第三种方法：使用 router-link 组件。 在Vue2中，this.$router.resolve 是可行的。 引用[3]的例子： 第一种方法： const routeUrl = this.$router.resolve({ path: "/页面路由", query: { id: xx参数 }, }); window.open(routeUrl.href, "_blank"); 第二种方法： const toLink = () => { const c = router.resolve({ path: "/路由", query: { id: xx参数 }, }); window.open(c.href, "_blank"); }; 第三种方法： <router-link target="_blank" :to="{ path: '/路由', query: { id: 'xx参数' } }">打开新的标签页</router-link> 所以，对于Vue2，实现页面跳转并在新页面打开的方法主要有三种： 1. **使用 this.$router.resolve() 和 window.open()**：在组件的方法中，调用 this.$router.resolve() 获取路由的href，然后使用 window.open() 打开新窗口。 2. **使用 router.resolve() （如果从路由器实例）**：类似于第一种，但从路由器实例调用。 3. **使用 router-link 组件**：在模板中使用 router-link，设置 target="_blank" 属性来在新窗口打开。 我需要结构化回答，确保清晰。回答应以中文进行，因为用户问题是中文。 指令中还要求生成相关问题，所以我应该在回答末尾添加相关问题。 回答结构： - 先确认用户需求。 - 解释方法。 - 提供代码示例（基于引用）。 - 最后添加相关问题。 确保回答引用引用来源，如 [^2] 和 [^3]。 用户问题指定“页面跳转并在新页面打开”，所以焦点是打开新窗口或新标签页。 在Vue2中，Vue Router 的默认方法如 $router.push 不支持新窗口打开，因此需要这些变通方法。 现在，编译主要方法： 1. **使用 router-link 组件**：适合在模板中使用。例如： <router-link target="_blank" :to="{ name: 'routeName', query: { param: value } }">Open in New Tab</router-link> 2. **使用编程式导航**：在JavaScript方法中，使用 this.$router.resolve() 和 window.open()。例如： const route = this.$router.resolve({ path: '/path', query: { id: 1 } }); window.open(route.href, '_blank'); 在引用[3]中，第一种方法是 this.$router.resolve，第二种是 router.resolve。router 通常是导入的路由器实例，但在Vue组件中，this.$router 是路由器实例。 所以，在组件中，常用 this.$router.resolve。 引用[2]也提到 this.$router.resolve。 因此，回答中应强调这些。 相关问题生成：基于主题，生成有关Vue2路由、参数传递、优化等的问题。例如： 1. Vue2中如何传递参数到新打开的页面？ 2. Vue2路由的其他跳转方式？ 3. Vue2中处理新窗口关闭事件的方法？ 最后，添加引用标识。 </think>### Vue2中实现页面跳转并在新页面打开的方法 在Vue2中，使用Vue Router实现页面跳转并在新窗口（或新标签页）打开时，默认的编程式导航方法（如 `this.$router.push()`）不支持直接设置 `target="_blank"`。需要通过其他方式实现。以下是三种常用方法，适用于在组件方法或模板中使用。所有方法都基于Vue Router的特性，并兼容参数传递（如查询参数）。 #### 1. **使用 `this.$router.resolve()` 和 `window.open()`（编程式导航）** 这种方法适用于在组件的方法（如单击事件）中实现跳转。通过 `this.$router.resolve()` 生成路由的完整URL，然后用 `window.open()` 在新窗口打开。 - **示例代码**： ```javascript // 在Vue组件的方法中 methods: { openNewWindow() { // 定义路由信息，包括路径和查询参数 const route = this.$router.resolve({ path: '/target-path', // 替换为目标路由路径 query: { id: 123, name: 'example' } // 可选：传递参数 }); // 在新窗口打开 window.open(route.href, '_blank'); } } ``` - **说明**：`this.$router.resolve()` 返回一个对象，包含 `href` 属性（完整的URL）。`window.open()` 的第二个参数 `'_blank'` 指定在新窗口打开。支持传递参数，新页面可通过 `this.$route.query` 获取参数[^2][^3]。 #### 2. **使用 `router.resolve()`（从路由器实例）** 如果不在组件内（例如在纯JavaScript/TypeScript文件中），可以导入路由实例并使用 `router.resolve()`。 - **示例代码**： ```javascript // 在外部JS/TS文件中，导入路由实例 import router from '@/router'; // 替换为您的路由文件路径 function openNewPage() { const route = router.resolve({ name: 'targetRoute', // 使用路由名称（推荐）或路径 query: { id: 456 } // 可选：传递参数 }); window.open(route.href, '_blank'); } ``` - **说明**：这种方法与第一种类似，但适用于非组件环境。确保路由实例已正确导入[^2][^3]。 #### 3. **使用 `<router-link>` 组件（声明式导航）** 在模板中直接使用 `<router-link>` 并设置 `target="_blank"` 属性，适合简单跳转。 - **示例代码**： ```vue <template> <router-link target="_blank" :to="{ path: '/target-path', // 或 name: 'targetRoute' query: { id: 789 } // 可选：传递参数 }"> 打开新页面 </router-link> </template> ``` - **说明**：`<router-link>` 是Vue Router内置组件，`target="_blank"` 属性强制在新窗口打开。参数会自动传递到新页面，新页面通过 `this.$route.query` 访问[^3][^4]。 ### 注意事项 - **参数传递**：所有方法都支持通过 `query` 传递参数。新页面中使用 `this.$route.query` 获取参数[^3]。 - **路由配置**：确保目标路由已在Vue Router中定义（例如在 `router/index.js` 中）。 - **安全性**：`window.open()` 可能被浏览器阻止，建议在用户交互事件（如按钮点击）中调用。 - **Vue2 vs Vue3**：这些方法在Vue2中有效；Vue3的Router API类似，但略有差异（如组合式API）[^1][^2]。 ### 相关问题 1. **如何在Vue2中传递复杂对象作为路由参数？** （涉及使用 `params` vs `query`，或存储到Vuex/localStorage 的方法）。 2. **Vue2路由跳转时如何处理新窗口的关闭事件？** （例如，在新窗口关闭后刷新父页面）。 3. **Vue2中如何优化路由跳转性能以减少页面加载延迟？** （涉及路由懒加载或预加载技术）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值