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()
}这样就成功在新窗口打开了页面。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了uniapp中uni-load-more的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue3+elementPlus项目支持设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇博客针对axios库的核心代码做一个简要总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
springboot之springboot与netty整合方案
这篇文章主要介绍了VUE之关于store状态管理核心解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
Vue element el-table-column中对日期进行格式化方式(全局过滤器)
这篇文章主要介绍了Vue element el-table-column中对日期进行格式化方式(全局过滤器)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
v-if根据表达式的真假，切换元素的显示和隐藏操作DOM元素，这篇文章主要介绍了vue中的v-if基本使用,需要的朋友可以参考下2022-12-12
本文通过实例代码给大家介绍了vue 图标选择器的相关知识，图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
vue开发利器之unplugin-auto-import的使用
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,下面这篇文章主要给大家介绍了关于vue开发利器之unplugin-auto-import使用的相关资料,需要的朋友可以参考下2023-02-02
Vue ElementUI在el-table中使用el-popover问题
这篇文章主要介绍了Vue ElementUI在el-table中使用el-popover问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Ant Design的Table组件去除“取消排序”选项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论