vue 底部导航栏 一级路由显示 子路由不显示的几种实现方式

1.在router中设置meta对象,然后在App.vue里面根据navShow属性来判断是否显示底部导航栏

{

path: '/consult',

name: 'consult',

component: Consult,

meta: { navShow: true, cname: '一级页面' },

},

{

path: '/consultDetail',

name: 'consultDetail',

component: ConsultDetail,

meta: { navShow: false, cname: '二级页面' },

},

App.vue 

<footerView v-show="$route.meta.navShow"></footerView>

2.使用vueX状态管理去实现

定义一个变量来控制底部导横栏的显示

3.直接根据router-view,设置底部导航页面,

猜你喜欢

转载自blog.csdn.net/dwb123456123456/article/details/82428953