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

Question

我已经在我的Vuejs应用程序中集成了Facebook Page插件。当我从一个组件移动到另一个组件并返回到包含 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");
},
}