vue-router(this.$router)如何在新窗口打开路由跳转页面
更新时间：2023年12月04日 14:58:06 作者：『减减』
这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue-router(this.$router)在新窗口打开路由跳转页面
使用标签实现新窗口打开
在页面导航中被渲染为标签, 在vue2版本的支持 target=“_blank”
代码如下：
<router-link target="_blank" :to="{path:'/note'}">新窗口打开</router-link>编程式导航
有些时候需要在单页面中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。
我们常用的是$router.push 和$ router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve, 传参时可以使用query，也可以使用params
代码如下：
const routeUrl = this.$router.resolve({
path: '/路径',
query: { id }
})
window.open(routeUrl.href, '_blank')
vue报错之this.$router is undefine
最近写项目遇到这个报错，特此记录一下
axios.get('/person/ticket')
.then(response => {
this.$router.push('/ground')
})原因很简单，因为我使用的是箭头函数，改变了this指向，所以vue在这里找不到$router，从而报错
解决很简单
保留this即可
const that = this;
axios.get('/person/ticket')
.then(response => {
that.$router.push('/ground')
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现列表固定列滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
async和await作为异步函数,语法很简单,就是在函数前面加上async 关键字,来表示它是异步的,下面这篇文章主要给大家介绍了如何通过一文教会你vue中使用async和await的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了ant-design-vue 时间选择器赋值默认时间的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随过来看看吧2020-10-10
这篇文章主要介绍了通过vue提供的keep-alive减少对服务器的请求次数,文中给大家补充介绍了vue路由开启keep-alive时的注意点，需要的朋友可以参考下2018-04-04
vue3使用elementPlus进行table合并处理的示例详解
虚拟数据中公司下有多个客户,公司一样的客户,公司列需要合并,客户如果一样也需要合并进行展示,所以本文给大家介绍了vue3使用elementPlus进行table合并处理的实例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-02-02
在Vuex使用dispatch和commit来调用mutations的区别详解
今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了基于vue的短信验证码倒计时demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用，防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下2021-11-11
这篇文章主要为大家介绍了vue的父子组件传值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。接下来通过本文给大家介绍vue-amap安装和使用,需要的朋友可以参考下2021-12-12
最新评论