聊聊上篇随笔底部菜单隐藏 是vue做的移动端
先在mins.js里面写上事件总线
// 实例化一个事件总线对象
Vue.prototype.$bus = new Vue()
在App.vue文件里面写上
<template> <div> <!-- 这个就是你底部菜单 --> <FooterNav v-if="isShow"></FooterNav> <!-- 路由容器 --> <router-view></router-view> </div> </template> <script> import FooterNav from './FooterNav' export default { components: { FooterNav }, data() { return { // 底部菜单显示 isShow: true } }, created() { // 订阅让底部菜单隐藏的指令 this.$bus.$on('footernav', show => { this.isShow = show }) } } </script>
在组件你想隐藏就写上下面这段代码 你不在这个组件必须要还原一下底部菜单的显示
created(){
// 发布一个让底部菜单隐藏的指令
this.$bus.$emit('footernav',false)
}
// 组件注销前执行方法
beforeDestroy(){
// 发布一个让底部菜单显示的指令
this.$bus.$emit('footernav',true)
}