如何根据情况对底部导航栏的显示与隐藏

时间:2020-9-9 作者:admin


1.对router文件夹下的index.js进行设置
{ //精选
		path: '/',
		name: 'choiceness',
		component: Choiceness,
		//实现某些页面不需要显示底部导航栏
		meta: {
			navshow: true,
		}
	},
  • navshow:用于判断是否显示的参数,当为true时就显示,为false或者没有设置就不隐藏。
  • meta:router的元信息

2.在显示的底部的导航栏进行设置

<div class="nav-bottom" v-show="$route.meta.navshow">
		  <router-link to="/" class="col tchoiceness"><span>精选</span></router-link>
		  <router-link to="/agent" class="col tagent"><span>探店</span></router-link>
		  <router-link to="/find" class="col tfind"><span>发现</span></router-link>
		  <router-link to="/user" class="col tuser"><span>我</span></router-link>
	  </div>
  • v-show=”$route.meta.navshow” ,注意是route而不是router。
  • 当然也可以根据情况设置class ,通过三元运算符进行设置,当满足条件时执行某个.class
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。