vue vue-router vuex element-ui a

2017-11-19 本文已影响505人思吾谓何思

目前完成的功能：登录注册，商品分类的路由

GIF.gif

获取页面数据的思路：

一、定义api

打开api.js

Image 139.png

二、在productlist.vue页面创建时获取数据

打开productlist.vue

Image 140.png

三、编写mock.js

打开mock.js

Image 141.png

四、测试、修改

Image 142.png

可以看出来其实数据是回来了的，我先将数据渲染到页面上

打开productlist.vue

<template>
  <div>
    <h1>prolist</h1>
    <p v-text="$route.params.class"></p>
    <p>共{{productlist.length}}个商品</p>
    <ul>
      <li 
        v-for="(item, index) in productlist" 
        :key="item.productclass"
        v-text="item.productname">
      </li>
    </ul>
  </div>
</template>
<script>
import {GetProductList} from '../../../api/api'
export default {
  data () {
    return {
      productlist: []
    }
  },
  mounted () {
    let params = null
    if (this.$route.params.class === 'all') {
      params = ''
    } else {
      params = this.$route.params.class
    }
    GetProductList(params).then(res => {
      console.log(res)
      this.productlist = res.data.productlist
    })
  }
}
</script>