移动端如何让某些页面存在底部导航，某些页面不存在

桃扇骨 2023-03-01 13:45 7阅读 0赞

1、新建bottomBar.vue，底部页面

2、在App.vue中引入bottomBar.vue

<template>
      <div id="app">
        <router-view></router-view>
        <bottom-bar v-if="$route.meta.TabbarShow"></bottom-bar>
      </div>
    </template>
    <script>
    import bottomBar from './components/bottomBar'
    export default { 
      name: 'App',
      components:{ 
        bottomBar
      }
    }
    </script>

3、用true和false去判断是否隐藏底部组件

<bottom-bar v-if="$route.meta.TabbarShow"></bottom-bar>

4、在router中设置TabbarShow为true或false

export default new Router({ 
      routes: [
        { 
          path:'/',
          name:home,
          component:home,
          meta:{ 
            TabbarShow: true // 需要显示 底部导航
          }
        },
        { 
          path:'/project',
          name:project,
          component:project,
          meta:{ 
            TabbarShow: true // 需要显示 底部导航
          }
        },
        { 
          path:'/send',
          name:send,
          component:send,
          meta:{ 
            TabbarShow: true // 需要显示 底部导航
          }
        },
        { 
          path:'/customer',
          name:customer,
          component:customer,
          meta:{ 
            TabbarShow: true // 需要显示 底部导航
          }
        },
        { 
          path:'/my',
          name:my,
          component:my,
          meta:{ 
            TabbarShow: false // 需要显示 底部导航
          }
        }
      ]
    })