【品牌中心】--品牌中心列表页面（数据获取为新增接口暂未发布，暂时无法获取数据）

components/product/BrandList.vue

@@ -1,20 +1,6 @@
 <template>
   <div>
     <div id="brandsList" class="container">
-      <div class="title-icon">品牌索引</div>
-      <div class="hr-blue"></div>
-      <ul class="row initials">
-        <li class="col-xs-1 initial"><nuxt-link :to="'/product/brand?initial=ABC'">ABC</nuxt-link></li>
-        <li class="col-xs-1 initial"><nuxt-link :to="'/product/brand?initial=DEF'">DEF</nuxt-link></li>
-        <li class="col-xs-1 initial" @click="showList('GHI')">GHI</li>
-        <li class="col-xs-1 initial" @click="showList('JKL')">JKL</li>
-        <li class="col-xs-1 initial" @click="showList('MNO')">MNO</li>
-        <li class="col-xs-1 initial" @click="showList('PQR')">PQR</li>
-        <li class="col-xs-1 initial" @click="showList('STU')">STU</li>
-        <li class="col-xs-1 initial" @click="showList('VWX')">VWX</li>
-        <li class="col-xs-1 initial" @click="showList('YZ')">YZ</li>
-        <li class="col-xs-1 initial" @click="showList('0~9')">0~9</li>
-      </ul>
       <div id="brands">
         <div v-for="(brands, initial) in brandList" class="row container brands-page">
           <div class="brands-title">{{initial}}</div>
@@ -46,12 +32,12 @@
       brandList () {
         return this.$store.state.product.brand.brandList.data
       }
-    },
-    methods: {
-      showList (keyword) {
-        this.$store.dispatch('product/loadBrands', {'keyword': keyword})
-      }
     }
+//    methods: {
+//      showList (keyword) {
+//        this.$store.dispatch('product/loadBrands', {'keyword': keyword})
+//      }
+//    }
   }
 </script>
 
@@ -81,7 +67,7 @@
 
   #brandsList .row .initial {
     display: inline-block;
-    margin: 0 35px;
+    margin: 0 5px;
     font-size: 16px;
     color: #787878;
   }
@@ -122,7 +108,7 @@
     height: 30px;
     margin: 13px 0px;
     width: 25%;
-    display: inline-block;
+    float: left;
   }
 
   #brands .simplebrand a {

pages/product/brand.vue

@@ -1,25 +1,3 @@
 <template>
-  <div>
-    <recommends></recommends>
-    <brand-list></brand-list>
-  </div>
+  <nuxt-child />
 </template>
-
-<script>
-  import { Recommends, BrandList } from '~components/product'
-
-  export default {
-    name: 'brand',
-    layout: 'main',
-    fetch ({store}) {
-      return Promise.all([
-        store.dispatch('product/loadRecommends'),
-        store.dispatch('product/loadBrands', {'keyword': 'ABC'})
-      ])
-    },
-    components: {
-      Recommends,
-      BrandList
-    }
-  }
-</script>

pages/product/brand/brandList.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <recommends></recommends>
+    <div id="brandsList" class="container">
+      <div class="title-icon">品牌索引</div>
+      <div class="hr-blue"></div>
+      <ul class="row initials">
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/ABC'">ABC</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/DEF'">DEF</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/GHI'">GHI</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/JKL'">JKL</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/MNO'">MNO</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/PQR'">PQR</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/STU'">STU</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/VWX'">VWX</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/YZ'">YZ</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/0~9'">0~9</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <nuxt-child/>
+  </div>
+</template>
+
+<script>
+  import { Recommends } from '~components/product'
+
+  export default {
+    name: 'brand',
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadRecommends')
+      ])
+    },
+    components: {
+      Recommends
+    }
+  }
+</script>

pages/product/brand/brandList/_initial.vue

@@ -1,18 +1,15 @@
 <template>
-  <div>
-    <brand-list></brand-list>
-  </div>
+  <brand-list></brand-list>
 </template>
 
 <script>
   import { BrandList } from '~components/product'
 
   export default {
-    name: 'brand',
-    layout: 'main',
-    fetch ({store}) {
+    name: 'brandListDetail',
+    fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('product/loadBrands', {'keyword': 'ABC'})
+        store.dispatch('product/loadBrands', {'keyword': route.params.initial})
       ])
     },
     components: {