全国服务热线:4008-888-888

技术知识

有了小程序流程以后_vue完成动态显示与隐藏底部

vue实现动态显示与隐藏底部导航的方法分析       这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下

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

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

方式一:

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

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

2. 在App.vue页面

 template 
 div id="app" 
 router-view/ 
 foot v-if="$route.meta.footShow" /foot 
 /div 
 /template 

方式二:

使用watch监听导航切换

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程序设计有所帮助。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服