vue router点击打开新的标签页的方法(最新推荐)
更新时间：2023年10月09日 11:53:15 作者：鱼骨编程
vue router点击打开新的标签页的方法,只需要在router-link中加入target="_blank"即可在新的页面打开标签,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
vue router点击打开新的标签页的方法
只需要在router-link中加入target="_blank"即可在新的页面打开标签！
<router-link
:to="{
name: 'TrvalPlan',
params: {
fromCity: planInfo.fromCity,
backCity: planInfo.backCity,
goDate: planInfo.goDate,
},
}"
target="_blank"
class="thm-btn tour-search-one__btn">注意：但是这样会导致路由传参失效，因为一旦刷新，路由传参就失效了
vue-router跳转时打开新页面的两种方法
1、标签实现新窗口打开
官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用 < a > 标签，但事实上vue2版本的 是支持 target="_blank" 属性的(tag=“a”)，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>2、编程式导航
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 r o u t e r . g o 但 是 v u e 2.0 以 后 ， 这 种 方 式 就 不 支 持 新 窗 口 打 开 的 属 性 了 ， 这 个 时 候 就 需 要 使 用 t h i s . router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.router.go但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.router.resolve,如下：
seeShare(){
? ?let routeUrl = this.$router.resolve({
? ? ?path: "/share",
? ? ?query: {id:96}
? ?});
? ?window.open(routeUrl.href, '_blank');
}到此这篇关于vue router点击打开新的标签页的方法的文章就介绍到这了,更多相关vue router点击打开新的标签页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue mixins合并策略以及应用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了封装Vue Element的table表格组件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-08-08
本篇文章主要介绍了vue学习笔记之v-if和v-show的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue使用WEB自带TTS实现语音文字互转,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
一个uniapp小程序的项目,我们需要实现一个非常实用的功能——类似于锚点定位的交互效果,即在首页中有多个tab（分类标签）,每个tab对应着不同的模块,当用户点击某个分类的tab时,需要流畅地滚动到对应的内容位置,提供更好的用户体验,2023-10-10
vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决
这篇文章主要介绍了vue el-select绑定对象时,回显内容不正确,始终是最后一项的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了解决ant-design-vue安装报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
下面小编就为大家分享一篇axios post提交formdata的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了前端虚拟列表实现的思路及完整代码,虚拟列表是一种优化长列表性能的技术,通过只渲染可视区域的列表项来提升页面性能和用户体验,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
Vue3中PropType是TypeScript类型工具,用于定义组件props的类型,基本用法包括简单类型、对象、数组和函数定义,高级用法涉及联合类型、嵌套对象和函数类型,本文介绍Vue3中PropType的使用指南,感兴趣的朋友跟随小编一起看看吧2026-01-01
最新评论