vue2如何在特定路由页面显示/隐藏头部或底部导航（利用meta属性）

在app.vue 监听当前路由，后台查看返回结果：

<template>
  <div>
    <!-- 非 !    非 隐藏头 说明显示 -->
    <!-- 除了 登录和注册, 其他页面的hideHeader是undefined -->
    <!-- undefined会判定为false, 通过 非! 变为true -->
    <my-header v-show="!$route.meta.hideHeader" />
    <!-- 路由的占位符, 会根据路径切换成对应的组件 -->
    <!-- 通过路由切换的 页面组件, 存放在 views 目录下 -->
    <router-view />
    <my-footer />
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
// JS中也支持引入外部css文件 -- 同下方的 @improt 效果
import './assets/css/animate.css'
import MyFooter from './components/MyFooter.vue'

export default {
  components: { MyHeader, MyFooter },
  // 利用监听器,查看路由变化
  watch: {
    // 监听 $route 属性的变化
    $route(newValue) {
      console.log(newValue)
    },
  },
}
</script>

<style lang="scss" scoped>
// 全局引入, 不受scoped影响,  对所有用到的组件都生效
@import url('./assets/css/base.css');
</style>

切换路由页面，后台如图显示：

1.如上图在app.vue中书写   v-show="!$route.meta.hideFooter"

2.在router—>index.js中设置meta属性   meta: {hideHeader: true}

import Vue from 'vue'
import VueRouter from 'vue-router'
// 组件引入方式分两种: 1.普通 2.懒加载
// 由于首页Index 一定会被看到 -- 适合用普通的方式
import Index from '../views/Index.vue'
Vue.use(VueRouter)

const routes = [
  // vroute-named
  {
    path: '/pd/:lid', // : 代表参数
    props: true, //开启 属性解构 路由参数的功能
    name: 'ProductDetails',
    component: () => import('../views/ProductDetails.vue'),
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    // meta: 元数据 -- 存放自定义的
    meta: {
      hideHeader: true, //隐藏头: 真
    },
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: {
      // 其他路由没有这个属性, 则默认值为undefined, 判定为false
      hideHeader: true, //隐藏头: 真
    },
  },
  {
    path: '/', // localhost:8080/  即根路径
    name: 'Index',
    component: Index, //普通写法: 在文件顶部提前引入组件
  },
  {
    // 路由参数传递分两种方式
    // 1.传统   路径?参数=值&参数值  读取:$route.query
    // 2.简单   路径/参数值/参数值   读取:$route.params
    // 使用时:  /products/小米
    // ? 代表可选参数, 传不传都可以
    path: '/products/:kw?', // :代表是参数
    props: true, //开启 属性解构路由参数功能
    name: 'Products',
    // 懒加载写法: 用户访问这个路由 才会临时加载引入文件
    component: () => import('../views/Products.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router