vue组件显示与隐藏

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

我们可以根据组件身上的$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中使用组件标签时，就可以这样书写

 

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

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

详情看vue案例-组件显示与隐藏_vue控制组件的显示和隐藏_RedOorange的博客-CSDN博客