打个比方来说,我从列表页跳转到详情页,但我不想我的详情页下面底部导航怎么办也就是底部tabBar显示隐藏如何解决?
首先在每个路由配置下面进行配置
import Vue from 'vue'
import VueRouter from 'vue-router'
const Index=()=>import('../views/index')
const Search = () => import('../views/search')
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: Index,
meta: {
showTab: true
}
},
{
path: '/search',
component: Search,
meta: {
showTab: false
}
}
]
const router = new VueRouter({
routes
})
export default router
上面代码的意思就是如果底部需要tabbar就设置meta:{showTab:true}
不需要的就设置meta:{showTab:false}
然后在app.vue
中的foot组件(就是底部配置的router-link
)中判断就行了
这里的foot组件就是下面的底部导航
<Foot v-if="this.$route.meta.showTab"></Foot>
这里呢是给出v-if
就是判断showTab是否为true了,为true显示tabBar为false不显示
完美解决~