vue-router 打开新窗口新tab页

最新推荐文章于 2025-06-20 16:24:12 发布

原创最新推荐文章于 2025-06-20 16:24:12 发布 · 1.1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

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

vue 专栏收录该内容

9 篇文章

订阅专栏

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

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

有时候需求需要点击某个按钮能新开一个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');

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小花花inhere

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue打开新窗口并且实现传参，有图有真相

m0_70960708的博客

10-25

275

我要实现的功能是打开一个新窗口用来展示新页面，而且需要传参数，并且参数不能显示在地址栏里面，而且当我刷新页面的时候，传过来的参数不能丢失，要一直存在，除非我手动关闭这个新窗口，即浏览器的标签页。通过面向百度编程，发现网上的根本达不到这个效果，而且还都是坑，明明实现不了，还若有其事的写出来，于是我在标题特意加上有图有真相，诚我不欺，实现不了功能，就不要出来糊弄人。方法，这种方法的打开窗口，是把当前A页面替换成要跳转过去的B页面，我打开新窗口是想看新东西，这倒好，直接让我之前的页面没了，这不操蛋嘛？

若依前后端分离新窗口打开页面，如何使用this.$router.resolve解决

一米阳光的博客

11-21

6745

若依框架菜单打开新窗口展示页面，使用this.$router.resolve解决，详细步骤，一看就会

参与评论您还未登录，请先登录后发表或查看评论

vue-router实现tab标签页（单页面）详解

12-29

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。首先，.vue中的内容非常简单，<router>创建标签，并指定路径，<router>渲染路由匹配到的组件。 <template> <div id=account> <p class=tab>   <!-- <router-li

vue-router打开新的tab页

zq15517069607的博客

05-11

1612

const path = '/approval' const { href } = this.$router.resolve({ path, query: { id: res.data }}) window.location.href = href

vue通过打开新标签页打开某个路由

热门推荐

weixin_68966058的博客

09-04

1万+

需要注意的是，router-link并不支持 target="_blank"属性，所以需要tag=“xxx”属性把router-link渲染成标签。有些时候需要在点击事件或者函数中实现页面跳转到新的界面，这时候就可以通过router.resolve()来实现。设计的渐进式框架，但是有时候在项目中也会出现新窗口打开页面的情况，此时，就需要用vue-router来解决。

vue3 的router跳转 - 页面同tab跳转和打开新tab跳转

不想起床

04-28

3674

vue3 路由当前tab跳转和打开新tab跳转

vue项目新打开一个tab页或者新窗口的方法

11-04

1090

router.resolve：返回一个路由地址的规范化版本。同时包含一个包含任何现有 base 的 href 属性。默认情况下，用于 router.currentRoute 的 currentLocation 应该在特别高阶的用例下才会被覆写。

3-Electron打开新窗口，并跳转到指定的路由

qkdgz的博客

08-21

1770

Electron打开新窗口，并跳转到指定的路由

vue跳转方式（打开新页面）及传参操作示例

12-28

本文实例讲述了vue跳转方式（打开新页面）及传参操作。分享给大家供大家参考，具体如下： 1. router-link跳转 // 直接写上跳转的地址 <router to=/detail/one> <span class=spanfour>link跳转 </router> // 添加...

两小时从零学会vue-admin-template框架

drhrht的博客

03-06

7536

一、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

Router 新 tab 页打开

qq_45747074的博客

03-14

446

【代码】Router 新 tab 页打开。

vue3 route跳转的new tab两种方式

三劫散仙

06-16

2972

Vue有两种类型的应用SPA和MAP，本文主要介绍的是SPA类型下面的使用方法。

vue-router 如何在新窗口打开页面

xqhys的博客

03-04

2549

1. <router-link>标签实现新窗口打开：官方文档中说v-link指令已经被一个新的<router-link> 组件指令替代，这一部分的工作已经被 Vue 2 中的组件完成。注意：<router-link>不支持target="_blank"，如果你想打开一个新标签页，你必须用<a>标签。但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，如下： ...

vue项目打开新的tab页面实现自动登录

技术刚刚好

01-03

1083

我们自己有一个vue项目，想在这个项目里面打开一个新的页面，这个新的页面是另外一个系统的网页，需要登录，我们想通过我们网站跳转过去，然后自动填写另外一个网站的账号，密码，点击登录，全部过程都是自动的。在上述代码中，您需要根据您登录页面的具体情况，使用JavaScript操作获取账号和密码输入框的元素，并填写对应的值。在上述清单文件中，我们声明了需要的权限（`"tabs"`和`"activeTab"`），并将`content.js`脚本注入到您的Vue项目的网页中。"name": "自动登录插件",

vue技巧：从A页面跳转到B页面tab选项卡的第一个页面

m0_67841039的博客

05-27

209

vue技巧：从A页面跳转到B页面tab选项卡的第一个页面

vue 若依新开tab 不关闭旧的tab

qq_40603125的博客

03-19

1343

router.js配置。

前端点击按钮开启新页面(Ant Design)

chou_kawaii的博客

04-03

2885

组件中添加了三个ContactView的网格布局组件,每个ContactView展示不同的新组件内容。2、组件文件里(ContactDetail.tsx)创建组件内容。4、在数据对象文件里(data.ts)创建第三步里的VO对象。5、在需要添加点击开启新页面的按钮里设置跳转的路由网址。1、路由文件里(route.tsx)创建好路由。3、编写ContactView.tsx组件。

在vue中，用路由router跳转打开一个新标签页

pipizhou16的博客

08-04

4467

vue-router跳转打开新页面

vue3 <router-view

04-01

### Vue3 中 `<router-view>` 的使用方法 `<router-view>` 是 Vue Router 提供的一个功能性组件，用于动态加载与当前路由匹配的视图组件。它会根据 `route.path` 渲染对应的组件[^2]。 #### 基本语法在模板中可以直接使用 `<router-view>` 标签来定义视图区域： ```html <template> <div id="app">  <router-view></router-view> </div> </template> ``` #### 配合 Vue Router 使用为了使 `<router-view>` 正常工作，需要先配置好 Vue Router 并将其注入到应用实例中。以下是完整的设置流程： 1. **安装 Vue Router** 如果尚未安装 Vue Router，则可以通过 npm 安装： ```bash npm install vue-router@next --save ``` 2. **创建路由文件** 创建一个名为 `router.js` 或类似的文件，定义路由规则： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import About from './views/About.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 3. **引入并挂载路由器** 在主入口文件（如 `main.js`）中引入并挂载路由器： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 4. **运行效果** 当用户访问不同的 URL 地址时，Vue Router 会自动切换 `<router-view>` 内部显示的内容为对应路径下的组件[^4]。 #### 结合 `keep-alive` 缓存功能如果希望某些页面被缓存以便提升性能或者保留状态，可以将 `<router-view>` 包裹在一个 `<keep-alive>` 标签内。这样只有指定条件下的子组件会被缓存。 ```html <template> <div id="app"> <keep-alive include="Home">  <router-view /> </keep-alive> </div> </template> ``` 注意：这里假设 `Home.vue` 文件中有 `export default { name: 'Home' }` 这样的声明[^1]。 #### 实际应用场景举例当构建一个多标签页的应用程序时，通常会在每次导航至新页面时记录该页面的信息到全局变量或 Vuex store 中，并利用这些数据配合 `<router-link>` 动态生成顶部 Tab 列表项。点击某个 Tab 后重新触发相应路由跳转逻辑即可完成多窗口间快速切换的需求[^3]。 ---