vue如何在新窗口打开页面
更新时间：2023年11月09日 09:32:54 作者：donggua_123
这篇文章主要介绍了vue如何在新窗口打开页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue在新窗口打开页面
有时候后我们会需要在一个新窗口打开页面，而我们都知道，vue是单页面的应用，通过router在内部跳转的。
但是依然有办法实现这个需求。
刚开始在网上找了一下，有两种方式，一种是给outer-link标签添加tag=a跳转打开新窗口，亲测有效。
<router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'1111'}}">热门好货</router-link>再一种就是通过router来实现，使用resolve方法将路径转换出来，window来打开
let routeData = this.$router.resolve({
name: "detail",
query: {goodsId:'1111'}
});
window.open(routeData.href, '_blank');但是我按这种方式写的时候，却跳转到根路径去了
路由配置
{
path: '/home/integral-record',
component: IntegralRecord,
meta: {
hasMaster: true,
name: '积分变更记录'
}
}按理说routeData.href应该是/home/integral-record才对
但实际打印出来的却是/shop/
这就导致跳转到了首页去，这显然不是我想要的，暂时没找到原因。但是当我们一定想要用路由跳转的时候怎么办呢？
我们小组长找到了一个方法：
给a标签动态设置href路径，然后主动触发click事件来跳转。亲测有效
就是在页面添加一个a标签，款高设为零或者隐藏，只要看不到就行，设置好target属性为_blank，href设为空
<a class="target" href="" target=" rel="external nofollow" _blank"></a>
给目标元素绑定@click=“test”事件，当点击目标元素的时候触发：
test() {
let target = this.$refs.target
target.setAttribute('href', window.location.origin + '/home/integral-record')
target.click()
}这样就成功在新窗口打开了页面。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3之事件绑定的实现逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
vue elementui二次封装el-table带插槽问题
这篇文章主要介绍了vue elementui二次封装el-table带插槽问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了两种在Vue3项目中给组件命名的方法：原生的export default方式和使用vite-plugin-vue-setup-extend插件的方式,通过代码介绍的非常详细,需要的朋友可以参考下2026-04-04
在 Vue Router 中,你可以使用滚动行为来定义路由切换时页面滚动的行为,本文就详细的介绍一下Vue-Router滚动行为的具体使用,感兴趣的可以了解一下2023-08-08
本文主要介绍了element table多层嵌套显示的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要介绍了在Vue中实现动态合计两个字段并输出摘要信息的方法,通过使用监听器和深度监听,确保当数据变化时能正确更新合计结果,具有一定的参考价值,感兴趣的可以了解一下2024-11-11
这篇文章主要给大家介绍了关于vue3+Naive UI数据表格基本使用方式详的相关资料,Naive UI是一个基于Typescript开发的针对Vue3开发的UI组件库,由TuSimple(图森未来)公司开发并开源,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue 动态设置路由参数的案例分析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
Vue.js每天必学之组件与组件间的通信,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
在Element UI或Element Plus中,使用el-input组件时,可以通过suffix插槽添加单位显示,如果设置了type为'number',滚轮滚动可能会导致数值微调,解决方法是阻止滚轮事件的默认行为,并用CSS隐藏掉输入框的上下箭头,确保数值输入的准确性,这样既美观又提升了用户体验2024-09-09
最新评论