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中禁止编辑的常见方法(以禁止编辑输入框为例)

    Vue中禁止编辑的常见方法(以禁止编辑输入框为例)

    在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这篇文章主要给大家介绍了Vue中禁止编辑的常见方法,文中介绍的方法主要以禁止编辑输入框为例,需要的朋友可以参考下
    2024-02-02
  • vue实现简单跑马灯效果

    vue实现简单跑马灯效果

    这篇文章主要为大家详细介绍了vue实现简单跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue3 appear 失效的问题及如何使用 appear

    Vue3 appear 失效的问题及如何使用 appear

    appear 是一个在元素默认被显示的情况下 调用进入动画效果,使得元素在这种初次渲染情况下 执行进入动画的属性,最近在学习vue3的动画时遇到appear无法生效的问题,本文给大家详细讲解,感兴趣的朋友一起看看吧
    2023-10-10
  • vue filter 完美时间日期格式的代码

    vue filter 完美时间日期格式的代码

    这篇文章主要介绍了vue filter 完美时间日期格式的方法,文中给大家提到了vue filter方法-时间格式化 的代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-08-08
  • vue前端实现dhtmlxgantt甘特图代码示例(个人需求)

    vue前端实现dhtmlxgantt甘特图代码示例(个人需求)

    这篇文章主要介绍了如何使用dhtmlx-gantt和chinese-days插件在项目中实现节假日置灰显示的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • 详解vue中属性执行顺序

    详解vue中属性执行顺序

    这篇文章主要介绍了vue中属性执行顺序,选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods,具体详细内容本文给大家讲解的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue-loader和webpack项目配置及npm错误问题的解决

    vue-loader和webpack项目配置及npm错误问题的解决

    这篇文章主要介绍了vue-loader和webpack项目配置及npm错误问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue electron实现无边框窗口示例详解

    vue electron实现无边框窗口示例详解

    这篇文章主要为大家介绍了vue electron实现无边框窗口示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue实现播放后端flask发送的mp3文件

    vue实现播放后端flask发送的mp3文件

    这篇文章主要为大家详细介绍了vue如何实现播放后端flask发送的mp3文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • axios如何取消重复无用的请求详解

    axios如何取消重复无用的请求详解

    这篇文章主要给大家介绍了关于axios如何取消重复无用的请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用axios具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12

最新评论