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')
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3中ref和reactive的使用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue3中element-plus router的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
element-plus 如何设置 el-date-picker 弹出框位置
el-date-picker 组件会自动根据空间范围进行选择比较好的弹出位置,但特定情况下,它自动计算出的弹出位置并不符合我们的实际需求,故需要我们手动设置,这篇文章主要介绍了element-plus 如何设置 el-date-picker 弹出框位置,需要的朋友可以参考下2024-07-07
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue基于input实现密码的显示与隐藏功能,文末给大家介绍了vue 如何实现切换密码的显示与隐藏效果，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料，允许采用简洁的模板语法声明式的将数据渲染进DOM，且数据与DOM绑定在一起，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
vue elementUI select下拉框如何设置默认值
这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
今天小编就为大家分享一篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue3源码系列通过render及patch了解diff原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在页面中经常会遇到自定义文本,如果文本过长就需要换行,在HTML中可以通过标签换行,也可以通过\n转椅字符换行,下面这篇文章主要给大家介绍了关于vue文本识别“\n”换行问题的解决方式,需要的朋友可以参考下2022-11-11
最新评论