好资源导航 » 文章资讯 » vue实现动态显示与隐藏底部导航的方法分析

vue实现动态显示与隐藏底部导航的方法分析

2023-08-29 05:16:04 216

本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考，具体如下：

在日常项目中，总有几个页面是要用到底部导航的，总有那么些个页面，是不需要底部导航的，这里列举一下页面底部导航的显示与隐藏的两种方式：

方式一：

1.路由配置meta:{footShow:true,}，

routes:[
{
path:'/',
name:'home',
redirect:'/home',//默认路由添加class
component:home,
meta:{
footShow:true,//true显示，false隐藏
},
},

2.在App.vue页面

方式二：

使用watch监听导航切换

watch:{//监听路由变化
$route(to,from){
letThisPage=to.name;
if(ThisPage==='home'||ThisPage==='healthcare'||ThisPage==='healtharea'||ThisPage==='personal'){
this.footShow=true;
}else{
this.footShow=false;
}
}
},

希望本文所述对大家vue.js程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

vue实现动态显示与隐藏底部导航的方法分析

热门推荐

随机推荐