vue2在部分页面显示公共头部,部分页面不显示公共头部写法及原理

第一步 在App.vue里面加入公共头部 定义一个v-if=“$route.meta.alive”

<template>
  <div id="app">
    <Header v-if="$route.meta.alive"/>
    <router-view />
  </div>
</template>

<script>
import Header from '@/components2/layout/header/index.vue'
export default  {
    
    
  name:  'App',
  components:{
    
    
    Header
  }
}
</script>

第二步 在router.js里面定义路由的地方加上meta属性

 {
    
    
      path: '/homePage', //入口首页
      component: (resolve) => require(['@/views2/homePage'], resolve),
      hidden: true,
      meta:{
    
    
          alive:true
      }
},

第三步 显示成功 红色的就是头部

有没有考虑过meta属性为什么能控制头部的隐藏和显示？meta属性的作用是什么？
让我们看下官方文档的解释

meta?:any
any 可以是任何的 meta可以是任何属性

那meta属性可以拿来做什么业务功能？
1.控制是否显示公共组件
2.到此路由所需要的 权限 角色
3.对此路由是否采用 缓存
4.此路由进入页面的标题等信息