vue 跳转到其他页面并关闭当前页面的实现代码

 更新时间:2023年09月27日 15:33:44   作者:小橘子皮__兜兜  
我在做一个调用虚拟机录屏的一个操作,需要在浏览器页面上,点击按钮后,关闭当前页面里的某一个页面,并且打开浏览器新页面是虚拟机的页面,本文给大家介绍vue 跳转到其他页面并关闭当前页面的实现代码,感兴趣的朋友一起看看吧

vue 跳转到其他页面并关闭当前页面

使用场景:我在做一个调用虚拟机录屏的一个操作,需要在浏览器页面上,点击按钮后,关闭当前页面里的某一个页面,并且打开浏览器新页面是虚拟机的页面,访问的是后端返回来的地址

1.通过路由跳转,路由关闭页面

   this.$store.state.app.tagNavList = this.$store.state.app.tagNavList.filter(
                  (item) => item.name !== 'webProofAdd'  //需要关闭的页面的名称
                )
                let tab = this.$store.state.app.tagNavList[
                this.$store.state.app.tagNavList.length - 1
                ]
                //跳转到目标页面
                this.$router.push({
                  name: tab.name,
                  params: { ...tab.params },
                  query: { ...tab.query },
                })
            //这里我拼了后端返回来的地址和端口
             window.open(`http://${url}:${vmNovncPort}`) //打开新页面,不会覆盖当前页面

注意,我这里是从 this.$store.state.app.tagNavList 一层一层找的,你也可以全局写一下

2.像这种页面的关闭,不是直接关闭浏览器页面

vue跳转到其它页面时同时关闭当前页面

                this.$router.push({
                  path: '/outlet-inits-initSheetYJ',
                })
				//vue跳转到其它页面时同时关闭当前页面
                this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
                  (item) => item.name !== 'outlet-daySheets-daySheetYJ'  //需要关闭的页面的名称
                )
                let tab = this.$store.state.contentTabs[
                  this.$store.state.contentTabs.length - 1
                ]
                this.$router.push({
                  name: tab.name,
                  params: { ...tab.params },
                  query: { ...tab.query },
                })
//initSheetYJ.Vue页面
activated()此方法相当于onshow方法,每次进入页面都会执行
  activated() {
    this.searchBtn()
  },

到此这篇关于vue 跳转到其他页面并关闭当前页面的文章就介绍到这了,更多相关vue跳转关闭当前页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中render函数的使用详解

    vue中render函数的使用详解

    这篇文章主要介绍了vue中render函数的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 解决VUE项目在IIS部署出现:Uncaught SyntaxError: Unexpected token < 报错

    解决VUE项目在IIS部署出现:Uncaught SyntaxError: Unexpected&n

    这篇文章介绍了解决VUE项目在IIS部署出现:Uncaught SyntaxError: Unexpected token < 报错的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue实现购物车选择功能

    vue实现购物车选择功能

    这篇文章主要为大家详细介绍了vue实现购物车选择功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • vue接口请求加密实例

    vue接口请求加密实例

    这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue之el-upload使用FormData多文件同时上传问题

    vue之el-upload使用FormData多文件同时上传问题

    这篇文章主要介绍了vue之el-upload使用FormData多文件同时上传问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题

    ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题

    这篇文章主要介绍了ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue数据绑定实例写法

    Vue数据绑定实例写法

    在本篇文章里小编给大家整理的是关于Vue数据绑定实例写法以及相关知识点,需要的朋友们学习下。
    2019-08-08
  • Element如何实现loading的方法示例

    Element如何实现loading的方法示例

    本文主要介绍了Element如何实现loading的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue实现右上角时间显示实时刷新

    vue实现右上角时间显示实时刷新

    这篇文章主要为大家详细介绍了vue实现右上角时间显示实时刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue中的同步调用和异步调用方式

    Vue中的同步调用和异步调用方式

    这篇文章主要介绍了Vue中的同步调用和异步调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01

最新评论