vue开发遇到的问题及解决方式

1. v-for循环时key重复出现

出现报错Duplicate keys detected: 'xxx'. This may cause an update error.
解决方法：保证key唯一
详细描述及解决方案：https://blog.csdn.net/sinat_42888557/article/details/108102379

2. 跳转到新页面回到顶部
   vue router滚动行为 https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

// 需要注意：如果vue最外层的#app，设置了body{width:100%,height:100%}一下方式就不可用了
// hash模式 
router.afterEach((to,from,next)=>{
　window.scrollTo(0,0)
  next()
})
// history模式
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

3. ref组件滚动到顶部

// 复用一个有better-scroll的页面时，需要回到顶部
beforeRouteUpdate(to, from ,next) {
    next()
    // scroll回到顶部
    this.$nextTick(() => {
      this.$refs.scroll.scrollTo(0,0)
    })
  }