mall-web-ssr/pages/product/kind/_id.vue

<template>
  <div class="container">
    <categroy-nav></categroy-nav>
    <category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter"></category-property>
    <component-goods></component-goods>
  </div>
</template>

<script>
  import { CategroyNav, CategoryProperty, ComponentGoods } from '~components/product'

  export default {
    layout: 'main',
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('product/loadKindParentsWithBothers', {id: route.params.id}),
        store.dispatch('product/loadKindBrands', {id: route.params.id}),
        store.dispatch('product/pageComGoods', {kindid: route.params.id})
      ])
    },
    components: {
      CategroyNav,
      CategoryProperty,
      ComponentGoods
    },
    methods: {
      loadPage (id) {
        this.$store.dispatch('product/pageComGoods', {kindid: this.$route.params.id, brandid: id})
      },
      listemBrandFilter (brandid) {
        if (brandid) {
          this.$store.dispatch('product/pageComGoods', {kindid: this.$route.params.id, brandid: brandid})
        } else {
          this.$store.dispatch('product/pageComGoods', {kindid: this.$route.params.id})
        }
      }
    }
  }
</script>

<style>
  .container {
    position: relative;
    width: 1190px;
    margin-right: auto;
    margin-left: auto;
  }
</style>