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+element DatePicker实现日期选择器封装
Vue Element DatePicker是一款基于Vue.js的日期选择控件,它提供了丰富的日期选择功能,支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能,极大地提高了用户的体验,是开发者必备的日期选择控件。2023-02-02解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
这篇文章主要介绍了解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论