vue/cli 怎么实现由一个页面跳到一个页面，底部导航栏跳进有跳出没有

比如说从商品列表跳到详情页但是在详情页没有底部的导航栏，但是在返回到商品列表，下面的导航在次出现

涉及的知识点是组件的通信 子组件传信息到父组件是 this.$emit("",参数)  父组件传信息到子组件是在组件data外面写一个props:[''list"],跨组件通信用到了const bus =new Vue()  bus.$on() 这个是写在父父组件  bus.$emit()这个是写在子子组件里面的  

 

步骤：1,在src里面新建一个文件夹bus，在里面引入Vue文件 ，再创建bus实例 const bus=new Vue()

import  Vue  from "vue";

let  bus  = new Vue();

export  default  bus;

　　

             2,App.vue引入这个文件

import bus from "./bus";

　　          3.在APP.vue写个v-show=flag flag=true  在created生命周期里面写这个bus.$on()

 

<template>
  <div class="box">
    <div class="menu" v-show="flag">
      <router-link to="/">首页</router-link>|
      <router-link to="/list">列表</router-link>|
      <router-link to="/myshoppingcar">购物车</router-link>|
      <router-link to="/mine">个人</router-link>
    </div>
    <router-view></router-view>
    <!-- 就是component :is -->
  </div>
</template>
<script>
import bus from "./bus";
export default {
  data() {
    return {
      flag: true,
    };
  },
  created() {
    bus.$on("changeFlag", (flag) => {
      //箭头函数 this指向
      console.log("执行");
      this.flag = flag;
    });
  },
};
</script>
<style scoped>
.menu {
  width: 100%;
  height: 40px;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  background-color: blanchedalmond;
  z-index: 9999;
}
.menu a {
  flex: 1;
  text-align: center;
}
</style>

 

　　 4 在组件的mouted 和destroyed生命周期里面写这个bus.$emit()