facebook - Facebook 页面插件未在 Vue Js 中加载

Question

我在我的 Vuejs 应用程序中集成了 Facebook 页面插件。当我从一个组件移动到另一个组件并返回到包含 Facebook 页面的组件时，页面没有加载。它仅在第一次和每次加载完整站点时加载。有什么解决办法吗？

Answer 1

经过一番挖掘，找到了答案。每次安装组件时，我都需要显式加载脚本。使用了这个 NPM 包 [ https://www.npmjs.com/package/vue-plugin-load-script ]

mounted() {
    this.$loadScript(
      "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=***&autoLogAppEvents=1"
    )
      .then(() => {
        this.$nextTick(() => {
          window.FB.XFBML.parse();
        });
      })
      .catch(() => {
        console.log("SCRIPT LAODING ERROR");
      });
  }

Answer 2

您可以像这样让 FB 使用 vue 路由器进行解析：

mounted() {
    if (typeof FB === "undefined") {
        this.fbInit();
    } else {
        window.FB.XFBML.parse();
    }
}
methods() {
    fbInit() {
        window.fbAsyncInit = function() {
            FB.init({
                appId: "11111111111",
                autoLogAppEvents: true,
                xfbml: true,
                version: "v6.0"
            });
            FB.AppEvents.logPageView();
        };
        (function(d, s, id) {
            var js,
                fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/fi_FI/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        })(document, "script", "facebook-jssdk");
    },
}