[英]Facebook share button disappear when route changed in nuxt.js (vue.js)
In my nuxt.js ("nuxt": "^2.15.7") web app I am using Facebook share button as described in this full code example .在我的 nuxt.js ("nuxt": "^2.15.7") web 应用程序中,我正在使用 Facebook 分享按钮,如完整代码示例中所述。
When application loads for the first time, then facebook share button is rendered correctly.首次加载应用程序时,facebook 共享按钮会正确呈现。 Unfortunately, when I navigate to another route and/or navigate back, then facebook share button disappears.
不幸的是,当我导航到另一条路线和/或导航回来时,facebook 分享按钮消失了。 Why this happens and how to fix it?
为什么会发生这种情况以及如何解决?
I have tried to implement following solutions including offered by the @Cbroe and @kissu:我尝试实施以下解决方案,包括@Cbroe 和@kissu 提供的解决方案:
Unfortunately, above offered solutions doesn't solved my problem.不幸的是,上面提供的解决方案并没有解决我的问题。
What is interesting, that Vue developer tools in Chrome browser indicates, that component <FbShareButton>
is present, but it doesn't show up on the page.有趣的是,Chrome 浏览器中的 Vue 开发人员工具指示组件
<FbShareButton>
存在,但它没有显示在页面上。
There is my initial code:有我的初始代码:
I have created nuxt plugin loadFacebookSdk.js to load Facebook SDK into the app, there is the code:我创建了 nuxt 插件 loadFacebookSdk.js 以将 Facebook SDK 加载到应用程序中,代码如下:
Vue.prototype.$loadFacebookSDK = async (d, s, id) => {
var js = d.getElementsByTagName(s)[0]
var fjs = d.getElementsByTagName(s)[0]
if (d.getElementById(id)) {
return
}
js = d.createElement(s)
js.id = id
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"
fjs.parentNode.insertBefore(js, fjs)
}
Then registered above plugin in the nuxt.config.js as following:然后在nuxt.config.js中注册上面的插件如下:
plugins: [
{ src: "~/plugins/loadFacebookSdk.js", mode: 'client' }
]
And finally created FbShareButton.vue component to load facebook SDK and render facebook share button:最后创建 FbShareButton.vue 组件来加载 facebook SDK 并渲染 facebook 分享按钮:
<template>
<div>
<div id="fb-root"></div>
<div class="fb-share-button"
data-href="https://developers.facebook.com/docs/plugins/"
data-layout="button"
data-size="small"
>
</div>
</div>
</template>
<script>
export default {
async created () {
if (process.client) {
await this.$loadFacebookSDK(document, 'script', 'facebook-jssdk')
}
}
}
</script>
There is a solution which solved a problem.有一个解决方案解决了一个问题。
I have created separate component FbShareButton.vue我创建了单独的组件 FbShareButton.vue
Put all logic (including Facebook SDK loading) inside that component as per this and this posts.根据这篇文章和这篇文章,将所有逻辑(包括 Facebook SDK 加载)放入该组件中。
Hence:因此:
<template>
<div id="1">
<div id="fb-root"></div>
<div class="fb-share-button"
:data-href="this.articleUrl"
data-layout="button"
data-size="small"
>
</div>
</div>
</template>
<script>
export default {
props: ['articleUrl', 'articleTitle', 'articleImage', 'articleDescription'],
head () {
return {
meta: [
{ property: "og:url", content: this.articleUrl },
{ property: "og:type", content: "website" },
{ property: "og:title", content: this.articleTitle },
{ property: "og:description", content: this.articleDescription },
{ property: "og:image", content: this.articleImage },
{ property:"fb:app_id", content:"YOUR_FB_APP_ID" }
],
script: [
{
hid: 'fb',
src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0',
defer: true,
// changed after script load
callback: () => {
FB.XFBML.parse()
}
}
]
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.