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跳转关闭当前页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3响应式对象是如何实现的(1)

    Vue3响应式对象是如何实现的(1)

    这篇文章主要介绍了Vue3响应式对象是如何实现的,文章围绕主题展开详细的内容介绍具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • element ui 对话框el-dialog关闭事件详解

    element ui 对话框el-dialog关闭事件详解

    下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue中父子组件的参数传递和应用示例

    vue中父子组件的参数传递和应用示例

    这篇文章主要介绍了vue中父子组件的参数传递和应用示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue使用vue-json-viewer展示JSON数据的详细步骤

    vue使用vue-json-viewer展示JSON数据的详细步骤

    最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,下面这篇文章主要给大家介绍了vue使用vue-json-viewer展示JSON数据的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue移动端设置全屏背景的项目实践

    vue移动端设置全屏背景的项目实践

    本vue移动端项目设置全屏背景,关键是要找对文件,然后添加background属性即可,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • Vue两个通信方式与动画过度及混入使用介绍

    Vue两个通信方式与动画过度及混入使用介绍

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue动态绑定v-model属性名方式

    vue动态绑定v-model属性名方式

    这篇文章主要介绍了vue动态绑定v-model属性名方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 在elementui中Notification组件添加点击事件实例

    在elementui中Notification组件添加点击事件实例

    这篇文章主要介绍了在elementui中Notification组件添加点击事件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue登录拦截 登录后继续跳转指定页面的操作

    Vue登录拦截 登录后继续跳转指定页面的操作

    这篇文章主要介绍了Vue登录拦截 登录后继续跳转指定页面的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-cli3访问public文件夹静态资源报错的解决方式

    vue-cli3访问public文件夹静态资源报错的解决方式

    这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论