![vue实现动态显示与隐藏底部导航的方法分析 vue实现动态显示与隐藏底部导航的方法分析](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考,具体如下:
在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式:
方式一:
1. 路由配置meta: {footShow: true, }
,
1
2
3
4
5
6
7
8
9
10
|
routes: [ {
path: '/' ,
name: 'home' ,
redirect: '/home' , // 默认路由添加class
component: home,
meta: {
footShow: true , // true显示,false隐藏
},
},
|
2. 在App.vue页面
1
2
3
4
5
6
|
< template >
< div id = "app" >
< router-view />
< foot v-if = "$route.meta.footShow" ></ foot >
</ div >
</ template >
|
方式二:
使用watch监听导航切换
1
2
3
4
5
6
7
8
9
10
|
watch: { // 监听路由变化
$route (to, from) {
let ThisPage = to.name;
if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal' ) {
this .footShow = true ;
} else {
this .footShow = false ;
}
}
},
|
希望本文所述对大家vue.js程序设计有所帮助。