可以在 全局路由控制中设置meta属性参考路由元信息(https://router.vuejs.org/zh-cn/advanced/meta.html),然后通过在路由中设置
routes: [
// 首页
{
path: '/',
name: 'index',
component: index,
// 是否开启底部导航
meta: {
// 路由层级,数值越大层级越深,以此决定转场动画的前进和后退 大于前进,小于后退
index: 0,
showFooter: true
}
// components:{
// default:Content,
// a:Index
// }
},
//其他页面
{
path: '/notice/content/:id',
name: 'content',
component: content,
// 是否开启底部导航
meta: {
// 路由层级,数值越大层级越深,以此决定转场动画的前进和后退 大于前进,小于后退
index: 1,
showFooter: false
}
},
]
来设置,这样在app.vue 中可以通过
<vuefooter v-show="$route.meta.showFooter"></vuefooter>
来控制公告底部的显示 在app.vue 中设置是因为这样可以让导航可以常驻页面,避免路由切换时导航也切换同时其他页面就不用再引入公共底部了