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框架中点击后跳转到其他页面并关闭当前页面的功能了。