脚本宝典收集整理的这篇文章主要介绍了vue vue-router vuex element-ui axios的学习笔记（十二）获取商品页面数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

获取页面数据的思路：

一、定义api

打开api.js

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

打开productlist.vue

三、编写mock.js

打开mock.js

四、测试、修改

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

打开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> 

效果

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

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

• 1、使用watch()来监听this.$route.params.class的值，当这个值变化的时候就触发获取数据的方法
• 2、我们在这个页面<router-view></router-view>的地方绑定一个动态的：key，这个切换路由的时候它就会重建这个页面

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

打开product.vue

效果：

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的vue vue-router vuex element-ui axios的学习笔记（十二）获取商品页面数据全部内容，希望文章能够帮你解决vue vue-router vuex element-ui axios的学习笔记（十二）获取商品页面数据所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。