[BScroll warn]: Can not resolve the wrapperDOM. .......

用vue.js开发高仿饿了么项目时,在开发ratings组件时,用到了better-scroll,控制台报如下错误:在这里插入图片描述

检查代码发现template中ref值用ratings-wrapper这种写法不行,改成驼峰写法后还是不行,然后就发现template中和js中ref值有一个写错了,多了一个r,啊啊啊!!!
ref值用驼峰写法!!!仔细检查ref值的单词拼写是否正确且一致!!!
<div class="ratings" ref="ratingsWrapper">

this.$nextTick(() => {
   this.scroll = new BScroll(this.$refs.ratingsWrapper, {
     click: true
   });
})

以上错误改正后,评价页面首次进入发现不报错了。

但是!!!刷新后还是会报以上错误,同时页面跳转到了/goods路由对应的页面。找了一些资料发现了问题:

评价页刷新后页面跳转到商品页,即路由从http: //localhost:8080/#/ratings 跳转到了 http: //localhost:8080/#/goods,是因为路由配置中的一句代码router.push('/goods')
而这句代码当初是为了输入网址 http: //localhost:8080 页面不用点击就默认进入http: //localhost:8080/#/goods这个页面,即第一个标签对应的内容,即商品页,概括来说就是默认路由。

为什么评价页刷新后会报[BScroll warn]: Can not resolve the wrapper DOM的错误呢?

刷新评论页时,渲染ratings组件,ratings组件还未渲染完成,由于router.push('/goods'),路由已经跳转到goods组件,这时goods组件会把ratings组件的DOM给移除,切换到goods组件后,this.$nextTick()中的回调函数会执行,因为this.$nextTick()是异步过程,执行的时候,ratings组件中的ratingsWrapper这个DOM已经不在了,所以会报这个错误。

接下来就是解决默认路由的问题了,这是我以前不够严谨的地方,设置默认路由更好的方式应该是用重定向,如下所示。

   在路由配置中增加一项,使用重定向设置默认路由
    {
      path: '/',    
      redirect: '/goods',
      component: goods
    }

同时删掉router.push('/goods')这句代码

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值