Vue3 - 实现路由 “新开一页“ 进行页面跳转功能，Router 路由跳转时在新窗口打开页面（网站跳转页面时浏览器新开页签打开网页，支持在页面、纯 js/ts 文件中使用，详细示例代码教程）

已于 2025-01-19 16:50:46 修改
阅读量1w 收藏 8
点赞数 6
CC 4.0 BY-SA版权
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： vue3 vue-router 路由跳转新开一页详细教程 跳转页面在新窗口打开网页 在js文件中从新窗口打开页面 在ts文件中实现路由跳转新窗口 如何在浏览器窗口新开一页跳转
于 2023-11-28 21:25:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/134675793
+ Vue3 同时被 2 个专栏收录
254 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue3 开发问题汇总
155 篇文章 ¥9.90 ¥99.00
订阅专栏
本文提供了在 Vue3 项目中，利用 Vue Router 实现路由跳转时新开浏览器窗口（新页签）的详细教程。覆盖了普通页面和纯 js/ts 文件中的应用场景，包括多种实现方式，帮助开发者在不同场景下进行页面跳转。

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

前言

网上这方面教程很少，本文提供多种解决方案，适用于任何场景。

本文 实现了在 vue3 项目开发中，当页面跳转时浏览器打开新窗口（新页签）跳转，Router 路由跳转并新开一页教程，

无论您是在普通页面、纯 js/ts 文件中，都可以使用，

如下图所示，当执行路由跳转时浏览器会新开一页，然后正常打开网页，

示例代码干净整洁，JS/TS 都可以使用！

在这里插入图片描述

示例代码

按照以下的几种方案，无论您是在普通页面、纯js/ts 文件中，都可以使用!

一、普通页面

<template>
了解本专栏 订阅专栏 解锁全文
vue-router 在新窗口打开页面
前端知识分享喵
05-04 6145
Vue 属于单页面应用，而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
vue3 使用路由进行跳转打开新的标签页
Leijiang0504的博客
04-08 3231
【代码】vue3 使用路由进行跳转打开新的标签页。
vue2/vue3中vue-router路由跳转与打开新窗口携带参数
2301_76553269的博客
01-07 2625
在一些需求中经常遇到跳转页面，但是产品让跳转页面的同时打开一个新窗口方便用户进行对比数据，接下来就是跳转页面打开新窗口的方法。
vue3路由跳转打开新页面
最新发布
前端金牌摸鱼达人
07-01 2378
选择哪种方法取决于你的具体需求和项目结构。第一种和第四种方法更为推荐，因为它们直接使用了 Vue Router 的功能。
vue3 路由跳转，打开新页面
技术前端，忠于热爱 @回忆哆啦没有A梦
03-07 1万+
vue 路由跳转，打开新页面
Vue3 快速入门 (四) : 使用路由实现页面跳转
热门推荐
朱豪凯的博客
07-17 1万+
介绍在Vue3中，如何使用路由实现页面的跳转
vue3实现页面跳转
一个努力不被优化的程序员
03-01 5034
通过Vue 3和Vue Router的结合，可以轻松地实现页面跳转。首先需要安装Vue Router插件，并在项目中创建路由配置。然后在Vue应用的入口文件中使用`createApp().use()`方法将路由与应用关联起来。最后，在Vue组件中使用``创建路由链接，并可以通过`props`选项来传递参数。虽然本文只是简单介绍了如何使用Vue 3和Vue Router实现页面跳转，但希望能对你有所帮助。如果有兴趣深入了解Vue Router的更多功能和用法，建议阅读官方文档。
vue3页面跳转，主动路由跳转去新页面
oMangGuoBuDing1的专栏
08-12 1092
import { useRouter } from 'vue-router'const router = useRouter()const jump = (path) => { let result = path router.push(result)}
vue3.0 router跳转页面
woshishui099的博客
12-05 529
vue3.0 router
Vue3: vue-router页面跳转
西魏陶渊明的博客
12-28 3168
【代码】Vue3: vue-router页面跳转。
vue3+ts路由跳转打开新页面
leng0920的博客
05-13 625
vue3+ts路由跳转打开新页面
vue3路由Router的配置和跳转
kimi
03-13 7077
vue3路由Router的配置和跳转
vue 3中 页面跳转
qq_55111117的博客
07-29 6369
router-view> 是一个占位符，用于告诉Vue Router 在这个位置渲染当前路由匹配的组件。可以把它理解为一个动态的容器，负责显示与当前路径相匹配的组件。Vue Router 会根据路由配置找到对应的组件，并将这些组件渲染到<router-view> 中。Vue Router 的组件，用于处理 Vue 应用中的路由功能。路径时，AboutComponent 会被渲染到 <router-view> 位置。路径时，AboutComponent 会被渲染到 <router-view> 位置。
路由跳转到新的页面
zhumizhumi的博客
04-03 2389
JS跳转到新的页面： var href = 'http://www.baidu.com' window.open(href, '_blank') Vue跳转到新的页面 Vue跳转到新的页面 const { href } = this.$router.resolve({ name: "LookLive", params: { webinarId: this.$route.p...
Vue3中的页面跳转，详解，常见场景，常见问题与最佳解决方案
繁若华尘的博客
02-16 2915
通过以上方法，可以高效管理Vue3中的页面跳转，覆盖大多数业务场景，同时规避常见问题
Vue 3 中页面跳转方式的详细介绍
m0_70066267的博客
12-20 1161
Vue 3 是一种用于构建用户界面的JavaScript框架，它使用了响应式的数据驱动视图的方式。在Vue 3中，页面跳转主要依赖于Vue Router插件。本文将详细介绍如何在Vue 3中使用Vue Router实现页面跳转，并探讨各种跳转方式及其应用场景。Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。它允许开发者在单页面应用中通过不同的URL访问不同的组件，而无需重新加载页面。
vue3 route跳转的new tab两种方式
三劫散仙
06-16 2985
Vue有两种类型的应用SPA和MAP，本文主要介绍的是SPA类型下面的使用方法。
Vue页面路由动画实现与VueRouter详解
"本文主要介绍如何在Vue.js项目中实现页面跳转的动画效果，结合VueRouter和CSS过渡动画，以提升用户体验。作者通过实际操作和思考，分享了实现这一功能的关键步骤和技术要点。" 在Vue.js开发中，实现页面跳转动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值