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

效果

Image 144.png

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

GIF.2gif.gif

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

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

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

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

打开product.vue

Image 143.png

Image 145.png

效果：

GIF3.gif

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