单页应用中AddThis脚本初始加载后切换页面失效问题排查

这个问题在单页应用（SPA）里使用AddThis时非常常见，核心原因和AddThis的初始化逻辑、以及你当前的实现方式直接相关，具体拆解如下：

1. 脚本重复加载+初始化逻辑仅执行一次 #

你现在在每个组件的mounted钩子中都插入AddThis脚本，但AddThis的addthis_widget.js加载完成后，只会自动扫描一次当前已存在的DOM并初始化分享按钮。当你切换到新组件时：

• 如果脚本已经加载过，浏览器会直接从缓存读取，不会重新执行脚本；
• 就算脚本被重复插入，AddThis内部有加载判断机制，不会重复触发初始化，导致新组件里的分享按钮DOM没被绑定事件。

2. SPA路由切换未触发页面刷新 #

在Vue这类SPA框架中，路由切换只是替换组件DOM，不会刷新整个页面。AddThis默认只在页面首次加载完成时执行初始化，不会自动监听后续DOM的新增变化，所以新渲染出来的分享按钮容器无法被AddThis识别。

可行的解决方案 #

按推荐程度给你整理几个方案：

方案一：全局加载脚本+组件内手动初始化 #

1. 确保脚本只加载一次：把脚本插入逻辑移到根组件（比如App.vue）的mounted钩子中，保证整个应用生命周期内只加载一次：

// App.vue 的 mounted 钩子
mounted() {
  // 检查脚本是否已存在，避免重复插入
  if (!document.querySelector('script[src="//s7.addthis.com/js/300/addthis_widget.js"]')) {
    let addscript = document.createElement('script');
    addscript.setAttribute('src', '//s7.addthis.com/js/300/addthis_widget.js#pubid=你的pubid');
    document.head.appendChild(addscript);
  }
}

2. 组件内手动触发初始化：在每个包含分享按钮的组件的mounted钩子（确保DOM已渲染完成）里，调用AddThis的API重新初始化当前组件的按钮容器：

// 业务组件的 mounted 钩子
mounted() {
  // 确保AddThis脚本已加载完成
  if (window.addthis) {
    // 先刷新旧实例避免冲突
    window.addthis.layers.refresh();
    // 手动初始化当前组件的分享按钮容器
    window.addthis.toolbox('.addthis_toolbox');
  } else {
    // 若脚本还在加载中，延迟后再尝试初始化
    setTimeout(() => {
      window.addthis.toolbox('.addthis_toolbox');
    }, 500);
  }
}

方案二：组件销毁时清理AddThis实例 #

在组件的beforeUnmount钩子中，清理AddThis相关的事件和实例，避免切换组件时出现冲突：

beforeUnmount() {
  if (window.addthis) {
    window.addthis.destroy();
  }
}

方案三：利用AddThis异步加载回调 #

插入脚本时指定回调函数，确保脚本加载完成后再处理初始化：

// 业务组件的 mounted 钩子
mounted() {
  const script = document.createElement('script');
  script.src = '//s7.addthis.com/js/300/addthis_widget.js#pubid=你的pubid&async=1';
  script.onload = () => {
    window.addthis.toolbox('.addthis_toolbox');
  };
  // 仅在脚本不存在时插入
  if (!document.querySelector('script[src*="addthis_widget.js"]')) {
    document.head.appendChild(script);
  } else {
    window.addthis.toolbox('.addthis_toolbox');
  }
}

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