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

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

获取页面数据的思路:

一、定义api

打开api.js

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

打开productlist.vue

三、编写mock.js

打开mock.js

四、测试、修改

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

打开productlist.vue



效果

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

我们点击分类切换,但实际上它并没有切换,这是因为我用的动态路由,切换路由的时候这个productlist.vue的页面并没有重建,自然也就没有重新生产mounted(),要解决这个问题有2个方法
  • 1、使用watch()来监听this.$route.params.class的值,当这个值变化的时候就触发获取数据的方法
  • 2、我们在这个页面的地方绑定一个动态的:key,这个切换路由的时候它就会重建这个页面

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

打开product.vue

效果:

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

你可能感兴趣的:(vue.js)