Vue前端项目实战--移动商城-Bug记录及常用方法总结

Bug记录

1、 使用this.$router.push或this.$router.repalce指令时报错“NavigationDuplicat: Avoided redundant navigation to current location”。
解决方法：vue-router版本问题

2、 在created生命周期中不能调用组件，需要在mounted中调用。

3、 better-scroll 滚动时加载新的商品数据后无法向下拉动，因为图片是异步加载，当图片还没加载完成时，better-scrool就已经计算好了可滚动的区域，这个高度是不包含图片的，值会小于正常有图片的高度值，所以会出现商品滚动到一定程度无法滚动的情况。
解决方法：监听每一张图片是否加载完成，只要有一张图片加载完成就执行refresh()，刷新更新可滚动区域（优化，采用防抖函数，见5）。
如何监听图片是否加载完成？
通过给GoodsList的img绑定 @load ，在mounted生命周期监听图片加载，并将事件发送到事件总线(this.$bus.$emit、this.$bus.$on)，在main.js中通过vue实例建立事件总线。
GoodsList.vue

<template>
  <div class='goods'>
      <!-- @load监听图片加载 -->
      <img :src="item.show.img" alt="" @load='imgLoad'>
  </div>
</template>

<script>
export default {
   
  name: 'GoodsList',
  methods: {
   
    imgLoad() {
   
      //可以通过vuex，在这里改变vuex中的一个属性，表示图片加载完成$store
      //也可以通过事件总线$bus
      this.$bus.$emit('itemImageLoad')
    }
  }
}
</script>

main.js

//用Vue实例作为事件总线
Vue.prototype.$bus = new Vue();

Home.vue

export default {
   
  name