个人中心页优化并增加跳转

 <template>
 <template>
   <div class="orders">
   <div class="orders">
-    <div v-for="(value, key) in getOrderNums" :key="key" class="order-cell">
+    <div v-for="(value, key) in getOrderNums" :key="key" @click="goPage(value.page)" class="order-cell">
         <p class="order-num">{{value.num}}</p>
         <p class="order-num">{{value.num}}</p>
         <p class="order-text">{{value.name}}</p>
         <p class="order-text">{{value.name}}</p>
     </div>   
     </div>   
@@ -29,7 +29,15 @@ export default {
 
 
   },
   },
   methods: {
   methods: {
-    ...mapActions([]),
+    goPage({name, status}) {
+      this.$router.push({
+        name,
+        params: {
+          owner: 'buy',
+          status
+        }
+      })
+    }
   }
   }
 
 
 };
 };

 <template>
 <template>
-  <div class="tab-item" :class="itemClass">
+  <div class="tab-item" :class="itemClass"  @click="goPage(data.page)">
       <div class="title" :class="titleClass">{{data.title}}</div>
       <div class="title" :class="titleClass">{{data.title}}</div>
       <slot><div class="text">{{data.num}}</div></slot>
       <slot><div class="text">{{data.num}}</div></slot>
       <i class="cubeic-arrow"></i>
       <i class="cubeic-arrow"></i>
@@ -63,7 +63,12 @@ export default {
       
       
   },
   },
   methods: {
   methods: {
-    ...mapActions([]),
+    goPage(pagename) {
+        if(!pagename) {
+            return
+        }
+        this.$router.push({ name: pagename})
+      }
   }
   }
 
 
 };
 };

 <template>
 <template>
   <LayoutApp :show-back="true">
   <LayoutApp :show-back="true">
     <div class="body" ref="body">
     <div class="body" ref="body">
-      <template v-for="(value, key) in getMineList">
-        <tab-item :key="key" v-if="key === 'board'" :data="value" noLine titleBold titleSmall small grey>
+      <div v-for="(value, key) in getMineList" :key="key">
+        <tab-item v-if="key === 'board'" :data="value" noLine titleBold titleSmall small grey>
           <scroll></scroll>
           <scroll></scroll>
         </tab-item>
         </tab-item>
         <template v-else-if="key === 'resource1' || key === 'resource2'">
         <template v-else-if="key === 'resource1' || key === 'resource2'">
-          <div :key="key" v-if="value.data.template_name ==='single_image'">
+          <div v-if="value.data.template_name ==='single_image'">
             <singleImage  :data="value.data.data[0]"></singleImage>
             <singleImage  :data="value.data.data[0]"></singleImage>
           </div>
           </div>
         </template>
         </template>
         
         
-        <order :key="key" v-else-if="key === 'order'"></order>
-        <tab-item :key="key" v-else-if="key === 'sale'" :data="value" noLine titleBold></tab-item>
-        <tab-item :key="key" v-else :data="value"></tab-item>
-      </template>
+        <order v-else-if="key === 'order'"></order>
+        <tab-item v-else-if="key === 'sale'" :data="value" noLine titleBold></tab-item>
+        <tab-item v-else :data="value"></tab-item>
+      </div>
     </div>
     </div>
   </LayoutApp>
   </LayoutApp>
 </template>
 </template>

 export default [{
 export default [{
   name: 'tradeIncome',
   name: 'tradeIncome',
-  path: '/xianyu/home/mine/tradeIncome',
+  path: '/xianyu/home/mine/tradeIncome.html',
   component: () => import(/* webpackChunkName: "mine" */ './tradeIncome')
   component: () => import(/* webpackChunkName: "mine" */ './tradeIncome')
 }];
 }];

@@ -37,24 +37,24 @@ export default function() {
     getters: {
     getters: {
       getOrderNums(state) {
       getOrderNums(state) {
         let orderSum = {
         let orderSum = {
-          ready: {name: '待发货', num: state.readyNum},
-          sent: {name: '已发货', num: state.sentNum},
-          finish: {name: '交易成功', num: state.finishNum},
-          fail: {name: '交易失败', num: state.failNum}
+          ready: {name: '待发货', num: state.readyNum, page: {name: 'OrderList', status: 0} },
+          sent: {name: '已发货', num: state.sentNum, page: {name: 'OrderList', status: 1}},
+          finish: {name: '交易成功', num: state.finishNum, page: {name: 'OrderList', status: 2}},
+          fail: {name: '交易失败', num: state.failNum, page: {name: 'OrderList', status: 3}}
         };
         };
 
 
         return orderSum;
         return orderSum;
       },
       },
       getMineList(state) {
       getMineList(state) {
         let tabList = {
         let tabList = {
-          board: { title: '公告栏'},
-          sale: { title: '出售中', num: state.sellerNum},
+          board: { title: '公告栏', page: 'noticeList'},
+          sale: { title: '出售中', num: state.sellerNum, page: ''},
           order: {name: 'order'},
           order: {name: 'order'},
           resource1: {name: 'resource1', data: state.resource1},
           resource1: {name: 'resource1', data: state.resource1},
-          income: {title: '交易收入', num: state.assetData.totalIncome},
-          buyOrder: {title: '我购买的订单', num: state.buyNum},
-          buy: {name: 'buy', title: '我的求购', num: state.askBuyNum},
-          collect: {name: 'collect', title: '我的收藏', num: state.favoriteNum},
+          income: {title: '交易收入', num: state.assetData.totalIncome, page: 'tradeIncome'},
+          buyOrder: {title: '我购买的订单', num: state.buyNum, page: ''},
+          buy: {name: 'buy', title: '我的求购', num: state.askBuyNum, page: ''},
+          collect: {name: 'collect', title: '我的收藏', num: state.favoriteNum, page: 'favorite'},
           resource2: {name: 'resource2', data: state.resource2}
           resource2: {name: 'resource2', data: state.resource2}
         };
         };