进入详情页,隐藏底部导航菜单

进入详情页,隐藏底部导航菜单_第1张图片
有次在写app项目时,后来客户加了个要求就是点击进入详情页的时候底部的导航栏隐藏掉,不在显示,然后就看下边操作吧。
我们首先在index.js路由文件中配置我们的页面路由

{
	path: '/detail/:id',
	name: 'Detail',
	component: ()=> import ('../views/Detail.vue'),
	meta: {
		hideNav: true, // 是否隐藏底部导航
	}
}

然后我们在App.vue文件中 ,在引入 导航 Nav 组件的地方加上 指令 v-show = ! hideNav
同时设置默认为false值
并且监听这个路由
进入详情页,隐藏底部导航菜单_第2张图片

 // 默认展示

假设我们从列表页点击进入了详情,那我们直接用 router-link 就行了。
假设我们点击了图片进入了详情(把参数也传过去到详情页接口)


  

那我们的详情主要就是展示功能了,有啥展示啥就行,我弄的少,你看你们的项目需要



你可能感兴趣的:(vue.js,前端,javascript)