vue-router3 router-link 打开新窗口最新用法

最新推荐文章于 2025-07-01 14:32:29 发布
原创 最新推荐文章于 2025-07-01 14:32:29 发布 · 1.8k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #前端
这段代码展示了如何在Vue.js应用中利用<router-link>组件遍历hotBlogs数组，并为每个博客创建一个链接。点击博客标题会触发toBlogDetails方法，通过window.open在新窗口中打开指定的博客详情页面。此代码片段涉及到前端路由、事件处理以及Vue.js的插槽使用。

标签

<router-link  v-for="item in hotBlogs" :key="item.id"
             :to="'blogDetails/'+item.id"  v-slot="{href}"  custom>
  <div class="hot-item" v-text="item.title" @click="toBlogDetails(href)">
  </div>
</router-link>

js

toBlogDetails (href) {
window.open(href,"_blank")
},
Mr阿斌
关注
Vue3 - 实现路由 “新开一页“ 进行页面跳转功能，Router 路由跳转时在新窗口打开页面（网站跳转页面时浏览器新开页签打开网页，支持在页面、纯 js/ts 文件中使用，详细示例代码教程）
🏆 前端领域优质创作者
11-28 1万+
vue3，router路由，vue3怎么实现路由跳转支持新窗口打开，vue3路由跳转新开一页，vue3打开新页面路由跳转，vue3网页如何让浏览器打开新页签跳转页面，vue3怎么实现路由跳转支持新窗口打开，跳转时打开新页面，vue3跳转到一个新页面怎么实现，vue3页面跳转新开一个页面，vue3页面实现跳转到新的标签页，vue3编程式导航如何打开新窗口实现，vue3在js文件中如何实现路由跳转新开窗口，vue3在纯ts文件中页面跳转怎么新开窗口，vue3纯js/ts文件里跳转新页面时新开一页新窗口，Vue3
vue-router 在新窗口打开页面
前端知识分享喵
05-04 6447
Vue 属于单页面应用，而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
vue3 路由跳转，打开新页面
技术前端，忠于热爱 @回忆哆啦没有A梦
03-07 1万+
vue 路由跳转，打开新页面
vue3编程式导航如何打开新窗口实现_blank
langligelangxy的博客
07-28 2686
当然根据个人习惯，传递的参数是用path还是query{}，自己熟悉就好，路由也跟着更改就好。详情获取ID的形式也跟着改变。
vue3 使用路由进行跳转打开新的标签页
Leijiang0504的博客
04-08 3383
【代码】vue3 使用路由进行跳转打开新的标签页。
vue-router路由跳转与打开新窗口
weixin_小白鼠的博客
05-28 1万+
vue-router打开新窗口的方法及跳转方式对比 打开新窗口 方法1： const routeUrl = this.$router.resolve({ path: "/targetUrl", query: { id: 96 }, }); window.open(routeUrl.href, "_blank"); }, 方法2： <router-link target="_blank" :to="{ pat
vue-router 如何在新窗口打开页面
thinkingw770s的博客
07-01 7067
1. <router-link>标签实现新窗口打开： 官方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签，但事实上vue2版本的 <router-link> 是支持 target="_blan...
router-link 返回上页 和 新窗口打开链接
qq_38394175的博客
08-04 1395
1、如果使用了Vue-router的话，就可以用 this.$router.go（-1） 实现返回； 2、如果没使用vue-router，就可以用 window.history.go（-1） 实现返回效果。 可以 定义方法 @click=“goback” methods:{ goback(){ this.$router.go(-1);//返回上一页 } } 也可直接简写： @click="$router.back(-1)" 3.跳转链接到新页面 在te
VUE3.0中在新窗口打开页面的三种方式,vue路由中router与route的区别,query与params传参的区别
热门推荐
z15225158869的博客
07-12 2万+
VUE3.0中在新窗口打开页面的三种方式,vue路由中router与route的区别,query与params传参的区别 第一种:使用routerlink进行新窗口打开页面 <router-link tag="a" target="_blank" to="/test">第一种新窗口打开页面</router-link> 第二种: 使用window.open import { useRouter } from 'vue-router' //引入useRouter const route
vue2/vue3中vue-router路由跳转与打开新窗口携带参数
2301_76553269的博客
01-07 3068
在一些需求中经常遇到跳转页面，但是产品让跳转页面的同时打开一个新窗口方便用户进行对比数据，接下来就是跳转页面打开新窗口的方法。
vue-router在新窗口打开页面
weixin_68966058的博客
09-04 1万+
需要注意的是，router-link并不支持 target="_blank"属性，所以需要tag=“xxx”属性把router-link渲染成标签。有些时候需要在点击事件或者函数中实现页面跳转到新的界面，这时候就可以通过router.resolve()来实现。设计的渐进式框架，但是有时候在项目中也会出现新窗口打开页面的情况，此时，就需要用vue-router来解决。
vue 跳转打开新页面
一路向前的博客
08-13 3680
1.官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target="_blank" 属性的(tag=“a”)，如下： <router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link> 2.有些时候需要在单击事件或者在函数中实现页面跳转，那么可以
vue3路由跳转打开新页面
最新发布
前端金牌摸鱼达人
07-01 3458
选择哪种方法取决于你的具体需求和项目结构。第一种和第四种方法更为推荐，因为它们直接使用了 Vue Router 的功能。
vue-router跳转路由打开新窗口的方式(3-4版本都适用)
weixin_68658847的博客
05-11 3090
vue-router跳转路由打开新窗口的方式(3-4版本都适用)
vue路由打开新窗口
考拉很OK
07-05 1316
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 $router.go ,但是vue2.0以后，这种方式就不支持新窗口打开的属性了。这两种平常用的都比较多，这里就不再赘述。注：只有tag="a"模式下 target="_blank" 属性才会生效。
vue router-link 跳转 打开新标签页面
qq_33240556的博客
07-01 3243
如果你不介意使用 JavaScript 方法来实现新窗口打开，也可以使用。这样，当用户点击按钮时，就会在新标签页中打开指定的路由页面。组件来打开一个新标签页，需要注意的是，进行页面跳转时，若希望使用。在 Vue 中，使用。
Vue3 router路由跳转并打开新窗口
Wang_HaHa_的博客
01-04 1万+
Vue3 router打开新窗口
vue3.2版本 在浏览器打开一个新窗口 和 在页面弹出新窗口的写法（传参和接收参数）
weixin_44761131的博客
09-20 5769
vue3.2版本 在浏览器打开一个新窗口 和 在页面弹出新窗口的写法（传参和接收参数）
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值