关于vue中使用vue-wechat-title 动态设置网页标题后出现的BUG

  • BUG 复现:

由于了经常做微信项目,所以几乎每个项目都使用了该插件。但是最近的一个项目搭建的时候由于需要去监听路由并存储到本地。发现每次切换、刷新页面的时候都会出现加载三次的情况。在mainjs中打印了console.log如下图:

监听路由,打印to.path,如图:

  • bug处理:

既然出现了问题,那么怎么解决呢?首先百度、google了一下vue多次加载mainjs和如何加载的问题。发现没有什么实际性作用。项目打包后在服务器预览也是没有任何问题。另外将谷歌开发者模式关闭手机模式后,通过网页预览,点击也是没有任何问题。在确保mainjs中的内容无误的情况下,去查看了app.vue,如下图:

将所有的内容全部清空,只随便输入div标签。发现此时mainjs只输出了一次。(是我需要的结果,那么问题就应该出现在这里app.vue了)。

<Nav-Bar v-if="$store.state.showNav"></Nav-Bar>
    <transition :name="animationType">
      <router-view v-wechat-title="$route.meta.title"></router-view>
    </transition>

Nav-Bar: 底部导航,绝对没问题。

transition:动画绝对没问题

router-view:肯定没问题,

因此只有 v-wechat-title一个了,果不其然。去掉v-wechat-title后,只输出了一次:

然后使用 以下代码替换该插件

window.document.title = to.meta.title

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值