Vue项目中常见问题(1)如何控制组件在不同页面中的显示与隐藏

目录

问题一:首页|搜索底部是有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就隐藏