这篇文章主要为大家详细介绍了vue实现动态显示与隐藏底部导航的方法分析,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
本文实例讲述了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程序设计有所帮助。
本文来自:http://www.q1010.com/184/6939-0.html
注:关于vue实现动态显示与隐藏底部导航的方法分析的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。