When writing the background management system recently, I encountered a requirement:
close the current page, and then jump to the specified page.
The specific implementation method is as follows:
1. tabsView.vue
Add bus
files to the file and implement monitoring between components
1.1 Import bus
files
import Bus from '@/utils/bus';
bus
The content of the file is as follows:
import Vue from 'vue'
const Bus = new Vue();
export default Bus;
1.2 mounted
Add the following code in
mounted() {
Bus.$on('closeCurrentPage', (data) => {
this.remove(this.$route.fullPath,data);
});
},
1.3 remove
The 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 bus
files
import Bus from '@/utils/bus';
2.2 Bus.$emit('closeToPage', path)
, path
which 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();