当前位置: 首页 > news >正文

Footer组件在home 、search 显示,在登录、注册隐藏

footer组件显示与隐藏

  • 我们可以根据组件身上的$route获取当前路由的信息,通过路由路径判断Footer显示与隐藏。
  • 配置的路由的时候,可以给路由添加路由元信息【meta】,路由需要配置对象,它的key不能瞎写、胡写、乱写
<template><div><Header></Header><!-- 路由组件出口的地方 --><router-view></router-view><!-- Footer组件在home 、search 显示,在登录、注册隐藏 --><Footer v-show="$route.meta.show"></Footer></div>
</template>

在路由配置meta

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

 

相关文章:

  • 课设--学生成绩管理系统(一)
  • Nexus搭建maven私有仓库
  • 把本机的bash构建到docker镜像里面
  • 【源码】16国语言交易所源码/币币交易+期权交易+秒合约交易+永续合约+交割合约+新币申购+投资理财/手机端uniapp纯源码+PC纯源码+后端PHP
  • 显示数据库信息及发送Ajax请求
  • 【iOS】JSONModel源码阅读笔记
  • 【线性代数】第七章-二次型
  • Python闯LeetCode--第3题:无重复字符的最长子串
  • Node.js和npm的安装及配置
  • Centos系统yum安装mysql数据库
  • 将自己md文件发布到自己的博客园实现文件的持久化存储
  • FreeRTOS简单内核实现6 优先级
  • 小白跟做江科大32单片机之定时器输出比较
  • day38-39| 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯 62.不同路径 343. 整数拆分 96.不同的二叉搜索树
  • 数据结构--力扣104,110 二叉树相关(C
  • Java 内存分配及垃圾回收机制初探
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • JavaScript类型识别
  • Linux CTF 逆向入门
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • SpiderData 2019年2月25日 DApp数据排行榜
  • spring + angular 实现导出excel
  • Web标准制定过程
  • 分布式熔断降级平台aegis
  • 浮现式设计
  • 简单实现一个textarea自适应高度
  • 三分钟教你同步 Visual Studio Code 设置
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • #、%和$符号在OGNL表达式中经常出现
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #vue3 实现前端下载excel文件模板功能
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (3)(3.5) 遥测无线电区域条例
  • (4)logging(日志模块)
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (Note)C++中的继承方式
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (七)Java对象在Hibernate持久化层的状态
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • (转)LINQ之路
  • (转)Scala的“=”符号简介
  • ..回顾17,展望18
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
  • .NET/C# 使窗口永不获得焦点
  • .Net语言中的StringBuilder:入门到精通
  • .w文件怎么转成html文件,使用pandoc进行Word与Markdown文件转化