美文网首页
路由元信息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

    meta(元数据)控制组件的显示和隐藏的时候经常会用到meta元数据,配合v-show进行显示或者隐藏这段代码是项...

  • Vue-Router进阶

    路由元信息 定义路由的时候可以配置meta字段: 那么如何访问这个meta字段呢?首先,我们称呼routes配置中...

  • vue路由元信息

    meta:路由元信息 路由记录定义:routes配置的每一个路由对象都称为路由记录特点:路由记录是可以嵌套的,如果...

  • vue 如何设置在一级页面有底部导航 进入二级页面隐藏

    可以在 全局路由控制中设置meta属性参考路由元信息(https://router.vuejs.org/zh-cn...

  • vue中的路由元信息(meta)

    一、官方文档 那么如何访问这个字段meta 呢? 首先,我们称呼routers 配置中的每个路由对象为 路由记录。...

  • vue 中路由meta

    meta字段(元数据)直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状...

  • vue-router中$route 和 $router

    $route route是路由信息对象,里面主要包含路由的一些基本信息,包括name、meta、path、hash...

  • 深入理解Vue router的部分高级用法

    今天要介绍的是路由元信息,滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息,看看官网的解...

  • 笔试题整理(十一)

    茁壮网络 一、meta标签、command标签 meta标签提供与页面有关的元信息(meta-informatio...

  • vue-router路由元信息及keep-alive组件级缓存

    路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因...

网友评论

      本文标题:路由元信息meta

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