《vue》实现动态显示与隐藏底部导航方法！
在日常项目中，总有几个页面是要用到底部导航的，总有那么些个页面，是不需要底部导航的，这里列举一下页面底部导航的显示与隐藏的两种方式： 方法一：
- 路由配置meta: {footShow: true, }
routes: [
{
path: '/',
name: 'home',
redirect: '/home', // 默认路由添加class
component: home,
meta: {
footShow: true, // true显示，false隐藏
},
},
]
- 在App.vue页面
方法二：
【《vue》实现动态显示与隐藏底部导航方法！】使用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-cli|vue-cli 3.x vue.config.js 配置
- 诗歌:|诗歌: 《让我们举起世界杯，干了！》
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- 2020-04-07vue中Axios的封装和API接口的管理
- 人间词话的智慧
- 《一代诗人》37期，生活，江南j，拨动心潭的一泓秋水