比如将A页面中的事件传到B页面
需求：
管理后台右上角用户信息
当B页面点击时需弹出确认框并请求接口判断；其他页面点击则直接跳转
//A页面 navBar.vue
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-item @click.native="jumpPage">
任务明细
</el-dropdown-item>
<el-dropdown-item @click.native="jumpPage">
表单管理
</el-dropdown-item>
</el-dropdown>
//B页面 index.vue
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-item @click.native="jumpPage">
任务明细
</el-dropdown-item>
<el-dropdown-item @click.native="jumpPage">
表单管理
</el-dropdown-item>
</el-dropdown>
第一步：
在main.js中
//注册总线
Vue.prototype.$bus = new Vue()
第二步
navBar页面
methods: {
//跳转 任务明细 表单管理
jumpPage(e){
if(this.$route.name !== 'B页面'){
if(e.target.innerText == "表单管理"){
this.$router.push({name:"form"})
}
//跳转用户管理
else(e.target.innerText == "任务明细"){
this.$router.push({name:"task"})
}
}else{
// 总线触发事件 jumpPage
this.$bus.$emit('jumpPage', e)
}
},
}
第三步
B页面index.vue
mounted(){
//接收总线传值
this.$bus.$on('jumpPage', text => {
//通过$on监听事件 jumpPage
this.$confirm('离开该页将放弃此任务，您确定吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//跳转用户管理
if(text.target.innerText.trim() == "表单管理"){
this.$router.push({name:"form"})
//调用接口逻辑
}else{
//任务明细
this.$router.push({name:"task"})
//调用接口逻辑
}
}).catch(() => {
});
})
},
