addthis 脚本在初始加载后不起作用

Question

在我的组件中，我插入了我需要启用 addthis 按钮来共享内容的脚本。我在创建页面后插入脚本。但是我注意到，当我导航到另一个页面时，该页面也有一组使用 addthis 脚本的共享按钮，这些按钮不起作用。除非我进行硬重新加载，否则按钮可以工作，但如果我转到另一个页面，也会存在同样的问题。

这是我的脚本：

mounted() {
   let addscript = document.createElement('script');
   addscript.setAttribute(
     'src',
     '//s7.addthis.com/js/300/addthis_widget.js#pubid=#'
   );
   document.head!.appendChild(addscript);
 }

这是我的哈巴狗/html：

.addthis_toolbox.addthis_default_style.addthis_32x32_style.d-none.d-md-block
                  h6 SHARE
                  a.addthis_button_linkedin
                      i.icon.ion-social-linkedin
                  a.addthis_button_facebook.mx-auto
                      i.icon.ion-social-facebook
                  a.addthis_button_twitter
                      i.icon.ion-social-twitter
                  a.addthis_button_email
                      i.icon.ion-email

我在三个不同的组件中有这两组代码。

导航到具有相同代码的另一个页面时，初始加载后按钮无法正常工作的原因是什么？

Answer 1

如果您使用 vuejs 或任何 nodejs 框架，那么当您导航到新页面时，您的 web 应用程序不会重新加载页面，我的意思是导航到新页面时不会调用您的代码。因此，当您导航一个新页面时，您应该再次调用您的函数。

或者使用这个：

window.addEventListener('popstate', function(e){
   let addscript = document.createElement('script');
   addscript.setAttribute(
     'src',
     '//s7.addthis.com/js/300/addthis_widget.js#pubid=#'
   );
   document.head!.appendChild(addscript);
});