昆山规模的网站建设公司有哪些,安贞网站建设,在线看视频网站怎么做,做门窗投标网站文章目录6.Footer组件的显示与隐藏6.1我们可以根据组件身上的$route获取当前路由的信息#xff0c;通过路由路径判断Footer显示与隐藏6.2配置路由的时候#xff0c;可以给路由添加元信息[meta]#xff0c;路由需要配置对象#xff0c;它的key不能乱接、瞎写、胡写#xff…
文章目录6.Footer组件的显示与隐藏6.1我们可以根据组件身上的$route获取当前路由的信息通过路由路径判断Footer显示与隐藏6.2配置路由的时候可以给路由添加元信息[meta]路由需要配置对象它的key不能乱接、瞎写、胡写否则无法识别本人其他相关文章链接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//Footer6.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.路由跳转与传参相关面试题】
