1、新建底部导航页面,bottomBar.vue
2、在App.vue中引入底部导航,通过watch去监听路由跳转
<template>
<div id="app">
<router-view></router-view>
<bottom-bar v-if="show"></bottom-bar>
</div>
</template>
<script>
import bottomBar from './components/bottomBar'
export default {
name: 'App',
components:{
bottomBar
},
data(){
return{
show:true// 控制Tabbar组件的显隐状态
}
},
watch:{ // 监听路由变化 跳转到Label2 和 Label4页面就隐藏导航栏
$route(to){
if(to.path==='/send'||to.path==='/customer'){
this.show=false
}
}
},
}
</script>