vue vue-router vuex element-ui axios的学习笔记（十二）获取商品页面数据

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

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>

效果

Image 144.png

看起来是成功了，但其实有个大问题

GIF.2gif.gif

我们点击分类切换，但实际上它并没有切换，这是因为我用的动态路由，切换路由的时候这个productlist.vue的页面并没有重建，自然也就没有重新生产mounted（），要解决这个问题有2个方法

• 1、使用watch()来监听this.$route.params.class的值，当这个值变化的时候就触发获取数据的方法

• 2、我们在这个页面<router-view></router-view>的地方绑定一个动态的：key，这个切换路由的时候它就会重建这个页面

我采用第二种办法，这样还可以加个过渡动画，而且更简单

打开product.vue

Image 143.png

Image 145.png

效果：

GIF3.gif

这样就可以真正的动态切换路由了