vue-antd-admin——关闭当前页面，跳转到指定页面——bus事件总线的用法

最近在写后台管理系统时，遇到一个需求：

关闭当前页面，然后跳转到指定页面。

具体实现方法如下：

1.tabsView.vue文件中添加bus文件，并实现跨组件之间的监听

1.1 引入bus文件

import Bus from '@/utils/bus';

bus文件内容如下：

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

1.2 在mounted中添加如下代码

mounted() {
    
    
  Bus.$on('closeCurrentPage', (data) => {
    
    
    this.remove(this.$route.fullPath,data);
  });
},

1.3 remove方法如下：

methods:{
    
    
	remove(key, next) {
    
    
     //清除缓存
      let index = this.pageList.findIndex((item) => item.fullPath === key);
      this.clearCaches = this.pageList
        .splice(index, 1)
        .map((page) => page.cachedKey);
      if (next) {
    
    
        this.$router.push(next);
      } else if (key === this.activePage) {
    
    
        if (this.pageList.length <= 1) {
    
    
          this.$message.warning(this.$t('warn'));
          this.$router.push('/dashboard');//跳转到分析页面或者啥的
          return;
        } else {
    
    
          index =
            index >= this.pageList.length ? this.pageList.length - 1 : index;
          this.activePage = this.pageList[index].fullPath;
          this.$router.push(this.activePage);
        }
      }
    },
}

2.使用Bus.$emit('closeToPage', path)触发方法

2.1 引入bus文件

import Bus from '@/utils/bus';

2.2 Bus.$emit('closeToPage', path)，path就是关闭当前路由后跳转的路由

完成！！！多多积累，多多收获！！！

同理，跳转到指定页面

mounted() {
    
    
   //监听跳转到指定页面
    Bus.$on('navigateToPage', (data) => {
    
    
      this.$router.push(data);
    });
  },

使用方法
Bus.$emit('navigateToPage', '/dashboard');//跳转到分析页面

刷新当前页面

location.reload();