admin

12_vuecli/mediaapp/src/App.vue

@@ -7,13 +7,23 @@
       <router-link to="/mine">Mine</router-link>
     </nav>
     <router-view/> -->
-    <NavComp></NavComp>
-    <router-view/>
+    <NavComp :val="tabVal"></NavComp>
+    <router-view @changePage="changeTabVal"/>
   </div>
 </template>
 <script>
 import NavComp from '@/components/NavComp.vue'
 export default {
+  data() {
+    return {
+      tabVal:'1001'
+    }
+  },
+  methods: {
+    changeTabVal(val){
+      this.tabVal = val
+    }
+  },
   components: {
     NavComp
   }

12_vuecli/mediaapp/src/components/NavComp.vue

@@ -1,12 +1,12 @@
 <template>
-    <div :class="['nav-comp',activeClass]">
+    <div :class="['nav-comp',activeTabObj.classVal]">
         <div class="header">
             <i class="home-btn iconfont icon-home"></i>
-            <div class="title">{{titleText}}</div>
+            <div class="title">{{activeTabObj.name}}</div>
         </div>
         <div class="nav">
             <ul>
-                <li :class="{'active':item.id == activeTab}" v-for="item in tabBtn" :key="item.id" @touchstart="goPage(item.path,item.id)">
+                <li :class="{'active':item.id == val}" v-for="item in tabBtn" :key="item.id" @touchstart="goPage(item.path,item.id)">
                     <i :class="['iconfont',item.icon]"></i>
                     <span>{{item.name}}</span>
                 </li>
@@ -61,25 +61,40 @@ export default {
             ]
         }
     },
+    props:{
+        val:{
+          type:String,
+          default:"1001"  
+        }
+    },
     computed:{
-        titleText(){
-            let _thisVal = "";
-            this.tabBtn.forEach(val => {
-                if(val.id == this.activeTab){
-                    _thisVal = val.name;
-                }
-            });
-            return _thisVal;
-        },
-        activeClass(){
-            let _thisVal = "";
+        activeTabObj(){
+            let _thisVal = {}
             this.tabBtn.forEach(val => {
-                if(val.id == this.activeTab){
-                    _thisVal = val.classVal;
+                if(val.id == this.val){
+                    _thisVal = val;
                 }
             });
             return _thisVal;
         }
+        // titleText(){
+        //     let _thisVal = "";
+        //     this.tabBtn.forEach(val => {
+        //         if(val.id == this.activeTab){
+        //             _thisVal = val.name;
+        //         }
+        //     });
+        //     return _thisVal;
+        // },
+        // activeClass(){
+        //     let _thisVal = "";
+        //     this.tabBtn.forEach(val => {
+        //         if(val.id == this.activeTab){
+        //             _thisVal = val.classVal;
+        //         }
+        //     });
+        //     return _thisVal;
+        // }
     },
     methods: {
         goPage(path,id){

12_vuecli/mediaapp/src/views/book/BookPage.vue

@@ -2,4 +2,11 @@
     <div class="book-container">
         <h1>Book</h1>
     </div>
-</template>
+</template>
+<script>
+export default {
+    mounted() {
+        this.$emit("changePage",'1002')
+    },
+}
+</script>

12_vuecli/mediaapp/src/views/mine/MinePage.vue

@@ -2,4 +2,11 @@
     <div class="mine-container">
         <h1>Mine</h1>
     </div>
-</template>
+</template>
+<script>
+export default {
+    mounted() {
+        this.$emit("changePage",'1004')
+    },
+}
+</script>

12_vuecli/mediaapp/src/views/talk/TalkPage.vue

@@ -2,4 +2,11 @@
     <div class="talk-container">
         <h1>Talk</h1>
     </div>
-</template>
+</template>
+<script>
+export default {
+    mounted() {
+        this.$emit("changePage",'1003')
+    },
+}
+</script>

12_vuecli/mediaapp/src/views/tv/TvPage.vue

@@ -2,4 +2,11 @@
     <div class="tv-container">
         <h1>TV</h1>
     </div>
-</template>
+</template>
+<script>
+export default {
+    beforeMount() {
+        this.$emit('changePage','1001')
+    },
+}
+</script>