vue-antd-admin - close the current page, jump to the specified page - usage of bus event bus

When writing the background management system recently, I encountered a requirement:
insert image description here
close the current page, and then jump to the specified page.

The specific implementation method is as follows:

1. tabsView.vueAdd busfiles to the file and implement monitoring between components

insert image description here

1.1 Import busfiles

import Bus from '@/utils/bus';

busThe content of the file is as follows:

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

1.2 mountedAdd the following code in

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

1.3 removeThe method is as follows:

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. Use Bus.$emit('closeToPage', path)the trigger method

2.1 Import busfiles

import Bus from '@/utils/bus';

2.2 Bus.$emit('closeToPage', path), pathwhich is the route to jump after closing the current route

Finish! ! ! A lot of accumulation, a lot of harvest! ! !

Similarly, jump to the specified page

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

How to use
Bus.$emit('navigateToPage', '/dashboard');//Jump to the analysis page

refresh current page

location.reload();

Guess you like

Origin blog.csdn.net/yehaocheng520/article/details/131515709