路由改进

components/pc/nav/navCard.vue

@@ -6,7 +6,7 @@
           class="nav-card__label"
           :style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}"
         ></div>
-        <nuxt-link tag="p" :to="navAddress" :style="{color:fontColor}">
+        <nuxt-link tag="p" :to="{path:navAddress, query:{id:labelId}}" :style="{color: isBlue||fontColor ? '#00AAE6' : '#666'}">
           <slot></slot>
         </nuxt-link>
           <div class="nav-card__menu" v-if="isShow===true && childList !== undefined" @mouseleave="handleMouseLeave">
@@ -15,7 +15,7 @@
               <nuxt-link
                 class="label-list"
                 v-for="(item, key) in childList"
-                :key="`${item}${key}`" :to="item.address">
+                :key="`${item}${key}`" :to="{path: item.address, query: {id: labelId, childId: item.childId}}">
                 {{item.label}}
               </nuxt-link>
             </div>
@@ -30,11 +30,12 @@ export default {
   name: "navCard",
   props: {
     childList: Array,
-    navAddress: String
+    navAddress: String,
+    labelId: String
   },
   data(){
     return{
-      fontColor: '#666',
+      fontColor: false,
       bgColor: '#fff',
       isShow: false,
       isBlue: false
@@ -43,22 +44,32 @@ export default {
   methods:{
     handleMouseLeave(){
       this.isShow=false;
-      this.fontColor = '#666';
+      this.fontColor = false;
     },
     handleMouseOver(){
       this.isShow=true;
-      this.fontColor = '#00AAE6';
+      this.fontColor = true;
     }
   },
   watch:{
     $route(to,from){
-      this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1;
+      if (this.$route.query.id) {
+        this.isBlue = this.$route.query.id.indexOf(this.labelId) !== -1;
+      } else {
+        this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1;
+      }
     }
   },
   created() {
-    console.log(this.$route.path);
-    if (this.$route.path.indexOf(this.navAddress) !== -1){
-      this.isBlue = true;
+    console.log(this.$route.query.id);
+    if (this.$route.query.id) {
+      if (this.$route.query.id.indexOf(this.labelId) !== -1){
+        this.isBlue = true;
+      }
+    } else {
+      if (this.$route.path.indexOf(this.navAddress) !== -1){
+        this.isBlue = true;
+      }
     }
   }
 }
@@ -84,6 +95,10 @@ export default {
       > p{
         width: 100%;
         padding-left: 14*$length;
+        @extend %animate-transition;
+        &:hover{
+          color: #00AAE6;
+        }
         .nav-card__label2{
           margin-left: 14*$length;
           background-color: #fff;

components/pc/nav/navWrap.vue

@@ -4,13 +4,16 @@
       v-for="(item,index) in list"
       :key="item.address"
       :navAddress="item.address"
+      :labelId="item.id"
       :childList="item.childList"
-    >{{item.label}}</nav-card>
+    >{{item.label}}
+    </nav-card>
   </div>
 </template>
 
 <script>
 import NavCard from './navCard';
+
 export default {
   name: "navWrap",
   components: {
@@ -21,20 +24,20 @@ export default {
     width: String,
     height: String
   },
-  data(){
-    return{
-      color: ''
+  data() {
+    return {
+
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.nav-wrap{
-  display: inline-block;
-  background-color: #fff;
-  padding-top: 21*$length;
-  padding-bottom: 74*$length;
-  @include border-radius(4*$length);
-}
+  .nav-wrap {
+    display: inline-block;
+    background-color: #fff;
+    padding-top: 21*$length;
+    padding-bottom: 74*$length;
+    @include border-radius(4*$length);
+  }
 </style>

pages/answer/index.vue

@@ -12,7 +12,7 @@
         <card-container
           width="816px"
           height="1012px"
-          title="程序人生"
+          :title="labelTitle"
         >
           <answer-card card-type="2"></answer-card>
         </card-container>
@@ -74,11 +74,40 @@ export default {
     return{
       list: [
         {
-          label: '全部类型',
-          address: '/answer'
+          label: '热门推荐',
+          address: '/answer',
+          id: '热门推荐'
+        },
+        {
+          label: '职业生涯',
+          address: '/answer',
+          id: '职业生涯'
+        },
+        {
+          label: '项目讨论',
+          address: '/answer',
+          id: '项目讨论'
+        },
+        {
+          label: '职场经验',
+          address: '/answer',
+          id: '职场经验'
         }
       ]
     }
+  },
+  created() {
+    this.$router.replace({
+      path: '/answer',
+      query: {
+        id: '热门推荐'
+      }
+    });
+  },
+  computed: {
+    labelTitle: function () {
+      return this.$route.query.id
+    }
   }
 }
 </script>

pages/blog/index.vue

@@ -12,7 +12,7 @@
         <card-container
           width="816px"
           height="1012px"
-          title="程序人生"
+          :title="labelTitle"
         >
           <project-card></project-card>
           <project-card></project-card>
@@ -56,10 +56,44 @@ export default {
       list: [
         {
           label: '全部类型',
-          address: '/blog'
+          address: '/blog',
+          id: '全部类型'
+        },
+        {
+          label: '程序人生',
+          address: '/blog',
+          id: '程序人生'
+        },
+        {
+          label: '移动开发',
+          address: '/blog',
+          id: '移动开发'
+        },
+        {
+          label: '前端',
+          address: '/blog',
+          id: '前端'
+        },
+        {
+          label: '其他',
+          address: '/blog',
+          id: '其他'
         }
       ]
     }
+  },
+  created() {
+    this.$router.replace({
+      path: '/blog',
+      query: {
+        id: '全部类型'
+      }
+    });
+  },
+  computed: {
+    labelTitle: function () {
+      return this.$route.query.id
+    }
   }
 }
 </script>

pages/project/index.vue

@@ -12,7 +12,7 @@
         <card-container
           width="816px"
           height="1012px"
-          title="人工智能"
+          :title="labelTitle"
         >
           <project-card></project-card>
           <project-card></project-card>
@@ -57,16 +57,93 @@ export default {
     return{
       list: [
         {
-          label: '全部类型',
-          address: '/project'
+          label: '全部项目',
+          address: '/project',
+          id: '全部项目'
+        },
+        {
+          label: 'web应用',
+          address: '/project',
+          id: 'web应用',
+          childList: [
+            {
+              address: '/project',
+              label: '桌面应用',
+              childId: '桌面应用'
+            },
+            {
+              address: '/project',
+              label: '手机APP',
+              childId: '手机APP'
+            },
+            {
+              address: '/project',
+              label: '实时聊天',
+              childId: '实时聊天'
+            },
+            {
+              address: '/project',
+              label: '快速开发',
+              childId: '快速开发'
+            }
+          ]
+        },
+        {
+          label: '基础框架',
+          address: '/project',
+          id: '基础框架',
+          childList: [
+            {
+              label: 'Vue.js',
+              address: '/project',
+              childId: 'Vue.js'
+            }
+          ]
+        },
+        {
+          label: '应用工具',
+          address: '/project',
+          id: '应用工具',
+          childList: [
+            {
+              label: '文件管理工具',
+              address: '/project',
+              childId: '文件管理工具'
+            },
+            {
+              label: '文本编辑',
+              address: '/project',
+              childId: '文本编辑'
+            }
+          ]
         }
       ]
     }
+  },
+  created() {
+    this.$router.replace({
+      path: '/project',
+      query: {
+        id: '全部项目'
+      }
+    });
+  },
+  computed: {
+    labelTitle: function () {
+      if (this.$route.query.childId) {
+        return this.$route.query.id + ' · ' + this.$route.query.childId
+      } else {
+        return this.$route.query.id
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+  /deep/ .nuxt-link-exact-active {
+    color: #00AAE6 !important;
+  }
   .project-container{
     > .project-container__main{
       width: $pageWidth;

pages/topic/index.vue

@@ -12,7 +12,7 @@
         <card-container
           width="816px"
           height="1070px"
-          title="热门话题"
+          :title="labelTitle"
         >
           <topic-card></topic-card>
         </card-container>
@@ -47,10 +47,39 @@ export default {
       list: [
         {
           label: '推荐',
-          address: '/topic'
+          address: '/topic',
+          id: '推荐'
+        },
+        {
+          label: '热门',
+          address: '/topic',
+          id: '热门'
+        },
+        {
+          label: '关注',
+          address: '/topic',
+          id: '关注'
+        },
+        {
+          label: '最新',
+          address: '/topic',
+          id: '最新'
         }
       ]
     }
+  },
+  created() {
+    this.$router.replace({
+      path: '/topic',
+      query: {
+        id: '推荐'
+      }
+    });
+  },
+  computed: {
+    labelTitle: function () {
+      return this.$route.query.id + '话题'
+    }
   }
 }
 </script>

pages/web.vue

@@ -52,15 +52,14 @@ export default {
         }
       ]
     }
+  },
+  created() {
+    this.$router.replace('/web/about')
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .nuxt-link-exact-active {
-    color: #00AAE6 !important;
-  }
-
   .web-container {
     .web-center {
       width: $pageWidth;