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点击打开新的标签页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在实际项目中，我们可能需要对请求进行“防抖”处理。本文主要实现axios中取消请求及阻止重复请求，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
这篇文章主要为大家详细介绍了vue实现tab栏点击高亮效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
相信大家在项目中经常会遇到一些上传下载文件的相关功能。这篇文章将为大家介绍一下Vue实现Excel本地下载及上传的示例代码，需要的可以参考一下2022-07-07
这篇文章主要介绍了Vue3 Pinia获取全局状态变量的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue过滤器实现日期格式化的案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了vue.js学习笔记:如何加载本地json文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。2017-01-01
mitt 主要有4个API：emit（触发某个事件）、on（绑定事件）、off（解绑某个事件）、all（获取所有绑定的事件）,这篇文章主要介绍了Vue3 组件间通信之mitt实现任意组件间通信,需要的朋友可以参考下2024-05-05
vue3+element plus中利用el-menu如何实现路由跳转
这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下2023-12-12
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
这篇文章主要介绍了Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-09-09
最新评论