meta(元数据)
控制组件的显示和隐藏的时候经常会用到meta元数据,配合v-show进行显示或者隐藏
这段代码是项目中控制<Footer/>组件在各个路由中的显示和隐藏
先在路由配置中加上meta元信息
export default [
{
path:'/home',
component:Home,
meta:{
show:true
}
},
{
path:'/search/:keyword?',
component:Search,
meta:{
show:false
}
},
{
path:'/register',
component:Register,
meta:{
show:false
}
},
{
path:'/login',
component:Login,
meta:{
show:false
}
}
]
然后在App.vue中对<Footer/>组件控制显示或者隐藏
<Footer v-show="$route.meta.show"></Footer>
注意:为什么用v-show而不用v-if来控制?
理论上来说,v-show和v-if都可以用来判断显示隐藏,但是相比较而言,在这里频繁使用判断显示隐藏,v-show对于性能优化更好。
所以在开发中,频繁切换显示隐藏用v-show,一次切换用v-if
网友评论