美文网首页
路由元信息meta

路由元信息meta

作者: glassUp | 来源:发表于2022-04-04 14:20 被阅读0次

    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

    相关文章

      网友评论

          本文标题:路由元信息meta

          本文链接:https://www.haomeiwen.com/subject/laecsrtx.html