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')
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了关于antd-vue a-menu菜单绑定路由的相关问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue3.0中使用websocket,封装到公共方法的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了element 表格多级表头子列固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了Vue倒计时3秒后返回首页Demo,倒计时结束后要清除计时器,防止内存泄漏,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vue中的插件：Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明，感兴趣的小伙伴可以跟随小编一起了解一下2022-01-01
一步一步学Vue，这篇文章为大家分享了第一篇前端主流框架vue学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue中pinia数据一直重复获取之前的值的解决方法,如果想让pinia数据不会重复获取之前的值需要手动强制触发 Pinia store 的状态更新,文中有详细的解决方法,需要的朋友可以参考下2024-04-04
这篇文章主要为大家介绍了Vue编程三部曲之将template编译成AST示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了如何使用 Vue.js 和纯 JavaScript 构建 Bootstrap 组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解
这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论