vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】

6.Footer组件的显示与隐藏

显示或者隐藏组件

• Footer组件：在Home、Search显示Footer组件

• Footer组件：在登录、注册时候隐藏

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

方式1：（不推荐）：通过$route.path判断符合的才显示，弊端是万一有100个路径我一直拼接下去？那写的也太长了，明显不现实，另外在使用路由传参时也会偶尔发生莫名的错误。

App.vue

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

方式2：（推荐）：通过路由上配置的meta元信息进行显隐控制，控制起来更加方便。

App.vue

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

router文件夹下的index.js

//配置路由
export default new VueRouter({routes:[{path: '/home',component: Home,meta:{"isShow": true}},{path: '/search',component: Search,meta:{"isShow": true}},{path: '/register',component: Register,meta:{"isShow": false}},{path: '/login',component: Login,meta:{"isShow": false}},//重定向，在项目跑起来的时候，访问/，立马让他定向到首页{path: '*',redirect: "/home",}]
})

问题1：正常场景是搜索页显示Footer，但是在练习路由传参的时候使用方式1的方法，发现Footer自动隐藏了为啥，如图？

router文件夹下的index.js代码如下

//引入vue-router路由插件
import VueRouter from "vue-router";
//引入Vue
import Vue from "vue";
Vue.use(VueRouter);//引入路由组件
import Register from '@/pages/Register'
import Login from '@/pages/Login'
import Home from '@/pages/Home'
import Search from '@/pages/Search'//配置路由
export default new VueRouter({routes:[{path: '/home',component: Home,meta:{"isShow": true}},{path: '/search/:keyword',component: Search,meta:{"isShow": true}},{path: '/register',component: Register,meta:{"isShow": false}},{path: '/login',component: Login,meta:{"isShow": false}},//重定向，在项目跑起来的时候，访问/，立马让他定向到首页{path: '*',redirect: "/home",}]
})

App.vue代码

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

答案：因为路径变得不一样了，原来路由配置中search组件的path只有path: ‘/search’，所以方式1的有正确效果，但是由于练习传参，现在的路径变成了path: ‘/search/:keyword’，这就导致整体路径变了，所以对应的App.vue也得跟着修改才能生效，即必须修改成/search/，在原来基础上多了个/，所以不推荐方式1的使用。

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

6.2配置路由的时候，可以给路由添加元信息[meta]，路由需要配置对象，它的key不能乱接、瞎写、胡写，否则无法识别

说明：这里的key不能乱写指的是routes中的属性，例如path、component、meta等等，自定义的无效且不识别，因此只能用固定的属性名称，但是meta代表元信息，它里面的对象属性可以自定义且能识别到。

本人其他相关文章链接

1.vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
2.vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
3.vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
4.vue尚品汇商城项目-day01【3.项目路由的分析】
5.vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
6.vue尚品汇商城项目-day01【5.路由组件的搭建】
7.vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
8.vue尚品汇商城项目-day01【7.路由传参】
9.vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】