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实现消息无缝滚动效果
这篇文章介绍了vue实现消息无缝滚动效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
vue 登录滑动验证实现代码
这篇文章主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
Vue实现hash模式网址方式(就是那种带#的网址、井号url)
这篇文章主要介绍了Vue实现hash模式网址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue3父子组件相互调用方法举例详解
这篇文章主要给大家介绍了关于Vue3父子组件相互调用方法的相关资料,vue中我们常常用到组件,那么组件中互相调用也是经常遇到的,需要的朋友可以参考下
2023-08-08
vue+el-table点击表头实现改变其当前样式
这篇文章主要介绍了vue+el-table点击表头实现改变其当前样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
uniapp前端实现微信支付功能全过程(小程序、公众号H5、app)
这篇文章主要介绍了uniapp前端实现微信支付功能的相关资料,通过uniapp开发跨平台应用时,需要处理不同平台的支付方式,包括微信小程序支付、公众号H5支付和App支付,需要的朋友可以参考下
2024-09-09
vue2结合element-ui的gantt图实现可拖拽甘特图
因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,下面这篇文章主要给大家介绍了关于vue2结合element-ui的gantt图实现可拖拽甘特图的相关资料,需要的朋友可以参考下
2022-11-11
解决antd 下拉框 input [defaultValue] 的值的问题
这篇文章主要介绍了解决antd 下拉框 input [defaultValue] 的值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
解决vant的Toast组件时提示not defined的问题
这篇文章主要介绍了解决vant的Toast组件时提示not defined的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
如何利用vue3实现放大镜效果实例详解
最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下
2021-09-09