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使用pdf-dist实现pdf预览以及水印添加

    vue使用pdf-dist实现pdf预览以及水印添加

    这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • vue+element DatePicker实现日期选择器封装

    vue+element DatePicker实现日期选择器封装

    Vue Element DatePicker是一款基于Vue.js的日期选择控件,它提供了丰富的日期选择功能,支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能,极大地提高了用户的体验,是开发者必备的日期选择控件。
    2023-02-02
  • 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

    解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

    这篇文章主要介绍了解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue3.0路由自动导入的方法实例

    vue3.0路由自动导入的方法实例

    这篇文章主要给大家介绍了关于vue3.0路由自动导入的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue 使用原生组件上传图片的实例

    vue 使用原生组件上传图片的实例

    这篇文章主要介绍了vue 使用原生组件上传图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • require.js+vue开发微信上传图片组件

    require.js+vue开发微信上传图片组件

    这篇文章主要为大家详细介绍了require.js+vue+vue-router+vue-resource开发微信上传图片组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue中this.$emit和this.$on的使用

    Vue中this.$emit和this.$on的使用

    这篇文章主要介绍了Vue中this.$emit和this.$on的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 关于axios如何全局注册浅析

    关于axios如何全局注册浅析

    这篇文章主要给大家介绍了关于axios如何全局注册的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用axios具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 一文带你搞懂Vue3中的各种ref的使用

    一文带你搞懂Vue3中的各种ref的使用

    在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法,让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题
    2023-08-08
  • vue项目热更新的坑及解决

    vue项目热更新的坑及解决

    这篇文章主要介绍了vue项目热更新的坑及解决方案,具有很好的参考价值,希望对的大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论