使用场景

使用网站的时候会发现，有的网站顶部和底部的样式都是通用的，不管切换到网站的什么区域，什么位置，网站的有些地方是不会变化的

比如这个某购物平台的底部资讯（有点不同，但是我们假装一样吧）

显示或者隐藏组件用到的API是这两个：v-if | v-show

从性能角度，v-show更好

案例

假设有个组件叫myFooter，在有的页面上要隐藏，有的要展示

我们可以根据组件身上的$route获取当前独有的信息，通过路由路径判断Footer显示与隐藏

直接的写法，就是在App.vue中，使用组件标签时，里面写上下面这行代码

<myFooter v-show="$route.path == '/home' || $route.path == '/search'"></myFooter>

其也就意味着在/home和/search页面下是显示的，别的不显示

但如果使用这种方法，我们网站的页面较多，后面写的代码就会很长，很不方便，所以就有第二种方法

配置路由的时候，可以给路由添加路由元信息【meta】，（路由需要配置对象，它的key不能瞎写）

其意味着，/home页面下，route中保存着一个叫show的对象，值为true

routes:[
        {
            path:"/home",
            component:Home,
            meta:{show:true}
        },
 ]

拥有了布尔值，我们就知道它是否想要被显示

App.vue中使用组件标签时，就可以这样书写

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

布尔值已知为true，即在/home页面下，myFooter页面展示，如果其它页面不想展示，同理设置为false即可