Vue结合AddThis分享链接异常：分页后复用首页链接

这个问题其实是AddThis的初始化机制和Vue的异步DOM更新特性共同导致的，并非两者不兼容，也不是AddThis故障——只要找对时机和方法，就能完美解决。

问题根源分析 #

AddThis在页面首次加载时会自动扫描DOM中的.addthis_inline_share_toolbox元素，读取其data-url、data-title等属性并绑定分享功能。但Vue切换分页时，是异步更新DOM的：它会复用已有的DOM元素（默认用v-for的索引作为key），只是更新元素的data-*属性，而AddThis并不会主动监听DOM属性的变化，所以依然沿用首次初始化时的旧链接。

你尝试的addthis.layers.refresh()和addthis.toolbox()方向是对的，但可能因为时机不对或者缺少DOM重置步骤，导致没生效。

可行的解决办法 #

方法1：给v-for元素添加唯一Key（最简洁可靠）

Vue的v-for默认使用索引作为元素标识，当分页切换时，新页面的item索引和旧页面一致，Vue会复用DOM元素而非重新创建。给每个分享项添加唯一的key（比如item的url），让Vue在切换分页时销毁旧DOM、创建新DOM，这样AddThis会重新扫描新元素的data-*属性：

<div id="app">
  <div class="sharer" v-for="item in items" :key="item.url"> <!-- 新增唯一key -->
    <div class="addthis_inline_share_toolbox" :data-url="item.url" :data-title="item.title">{{ item.title }}</div>
  </div>
  <button @click="switchPage">Switch pages</button>
</div>

然后在Vue的updated钩子中，等待DOM完全更新后重新初始化AddThis：

new Vue({
  el: '#app',
  // ... 其他代码不变
  updated() {
    this.$nextTick(() => {
      // 重新初始化所有分享工具盒
      addthis.toolbox('.addthis_inline_share_toolbox');
    });
  }
})

方法2：手动重置DOM并重新初始化（适合无法用key的场景）

如果不能通过key触发DOM重建，可以在切换分页后，先重置旧的分享元素，再让AddThis重新扫描：

methods: {
  switchPage() {
    this.currentPage = this.currentPage === 0 ? 1 : 0;
    this.$nextTick(() => {
      // 遍历所有分享工具盒，重置AddThis绑定的状态
      document.querySelectorAll('.addthis_inline_share_toolbox').forEach(el => {
        // 清除AddThis内部缓存的分享数据
        delete el.dataset.addthisShare;
        // 临时修改类名再还原，触发AddThis重新识别
        el.classList.remove('addthis_inline_share_toolbox');
        el.offsetHeight; // 触发重绘，强制Vue更新DOM
        el.classList.add('addthis_inline_share_toolbox');
      });
      // 重新初始化分享工具
      addthis.toolbox('.addthis_inline_share_toolbox');
      // 刷新AddThis全局状态
      addthis.refresh();
    });
  }
}

为什么你的尝试没生效？ #

• addthis.layers.refresh()：它主要用于刷新AddThis的全局层（比如侧边栏分享按钮），对动态生成的内嵌工具盒支持有限。
• 直接调用addthis.toolbox()：如果没有等待this.$nextTick，Vue还没完成DOM更新，此时调用只会扫描旧的DOM元素；即使加了nextTick，若没有重置AddThis的缓存数据，它依然会复用旧的配置。

内容的提问来源于stack exchange，提问作者msiemens