w1020/12_vuecli/mediaapp/src/App.vue

<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Tv</router-link>|
      <router-link to="/book">Book</router-link>|
      <router-link to="/talk">Talk</router-link>|
      <router-link to="/mine">Mine</router-link>
    </nav>
    <router-view/> -->
    <NavComp v-if="showNav" :val="tabVal"></NavComp>
    <router-view @changeNav="hideNav" @changePage="changeTabVal"/>
  </div>
</template>
<script>
import NavComp from '@/components/NavComp.vue'
export default {
  data() {
    return {
      tabVal:'1001',
      showNav:true
    }
  },
  methods: {
    hideNav(val){
      this.showNav = val
    },
    changeTabVal(val){
      this.tabVal = val
    }
  },
  components: {
    NavComp
  }
}
</script>
<style>
  #app{
    padding:1rem 0;
  }
</style>