非路由组件的显示与隐藏----路由元信息的使用

一、业务场景

• 一个Footer组件，【首页、搜索页中显示，登录页、注册页中不显示】。

显示隐藏组件：

• v-if|v-show，、使用v-show，因为v-if会频繁的操作dom元素消耗性能，v-show只是通过样式将元素显示或隐藏

二、实现

1、通过$route身上的路由信息来判断路径（不好）

<!-- 通过$route.path判断路径 -->
<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>
</div>

2、配置路由的时候，可以给路由添加路由元信息meta，在路由的原信息中定义show属性 meta:{show:true}，用来给v-show赋值，判断是否显示footer组件。（meta官网）

• 添加路由元信息meta

{
    name:'search',
    path:'/search/:keyword?',
    component:Search,
    meta:{
        show:true
    },
}

• 根据元信息meta判断是否显示

<Footer v-show="$route.meta.show"></Footer>