使用场景

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

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

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

从性能角度，v-show更好

案例

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

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

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

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

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

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

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

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

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！