目录
问题一:首页|搜索底部是有Footer组件，而登录注册是没有Footer组件
思路:Footer组件显示|隐藏，选择v-show|v-if
解决办法:
方法一:在App.vue中利用v-show来控制显示与隐藏
1.为什么用$route.path
因为在main.js中注册路由的信息时:当下图位置中书写router的时候,组件身上都会拥有$route,$routers属性
打开项目页面的控制台,可以看到$route下有path:"/home"
2.思考:假如有一百个路由组件要显示Footer,那你还是这样写,肯定写不下,所以要用到下面的方法:
方法二:利用路由元信息
vue官网中可以在定义路由的地方配置meta用meta来定义路由元信息
?首先在router文件夹里面的index.js中配置路由元信息
meta就成为了组件实例身上$route的一个属性了,可以在其他地方进行调用
最后在App.vue中调用$route.meta.show来进行判断就实现啦
面试题：v-show与v-if区别?
v-show:通过样式display控制
v-if：通过操作Dom , 元素上树与下树进行操作,性能消耗更多
问题一:首页|搜索底部是有Footer组件，而登录注册是没有Footer组件 思路:Footer组件显示|隐藏，选择v-show|v-if 解决办法: 方法一:在App.vue中利用v-show来控制显示与隐藏 <!-- Footer在Home、Search显示,在登陆、注册隐藏 --> <Footer v-show="$route.path=='/home'|| $route.path=='/search'"></Footer> 1.为什么用$route.path 因为在main.js中注册路由的信息时:当下图位置中书写router的时候,组件身上都会拥有$route,$routers属性 打开项目页面的控制台,可以看到$route下有path:"/home" 2.思考:假如有一百个路由组件要显示Footer,那你还是这样写,肯定写不下,所以要用到下面的方法: 方法二:利用路由元信息 vue官网中可以在定义路由的地方配置meta用meta来定义路由元信息 ?首先在router文件夹里面的index.js中配置路由元信息 meta就成为了组件实例身上$route的一个属性了,可以在其他地方进行调用?
最后在App.vue中调用$route.meta.show来进行判断就实现啦v-show的值是true就显示,是false就隐藏
?
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #Vue #控制显示隐藏 #组件身上都会拥有route
