Vue 控制公共组件在有些页面显示 有些页面不显示

场景： pc端网站，头部和底部大部分都是一样的，所以抽离成组件，然后直接放在App.vue里面，但是这样的话，部分页面是不需要头部或者底部的，例如注册登录等页面，对于这些页面，可以用路由的meta属性+v-if 来控制其是否展示。

就是说，写在App.vue里面的组件或者其他东西，默认会全局显示，我们可以使用路由的meta属性来控制什么时候展示或者不展示。

在需要展示头部和底部的路由上，添加上meta属性 alive值为true，不添加默认就是false：

 { path: '/home', //首页 component: (resolve) => require('@/views/home'), meta:{ alive:true }},{ path: '/login', //登录 component: (resolve) => require('@/views/login'),} 

然后再公共组件上写 v-if 判断条件就是meta里的alive值，如果为true就展示该组件，否则不展示，例如公共的头部组件：

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

以上就完成了在 登录页不展示头部，在首页展示头部。