当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

Posted 2023-03-25

【中文标题】当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

【英文标题】：Facebook share button disappear when route changed in nuxt.js (vue.js)

【发布时间】：2021-11-19 13:01:57

【问题描述】：

在我的 nuxt.js ("nuxt": "^2.15.7") 网络应用程序中，我正在使用 full code example 中所述的 Facebook 分享按钮。

当应用程序首次加载时，facebook 分享按钮会正确呈现。不幸的是，当我导航到另一条路线和/或导航回来时，Facebook 分享按钮就会消失。 为什么会发生这种情况以及如何解决？

我已尝试实施以下解决方案，包括@Cbroe 和@kissu 提供的解决方案：

Facebook share button dissapear after updatePanel How to add a 3rd party script code into Nuxt Facebook social plug-in not showing up when added dynamically

很遗憾，以上提供的解决方案并没有解决我的问题。

有趣的是，Chrome 浏览器中的 Vue 开发者工具表明，组件 <FbShareButton> 存在，但它没有显示在页面上。

这是我的初始代码：

我已经创建了 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)

然后在nuxt.config.js中注册上述插件如下：

plugins: [
     src: "~/plugins/loadFacebookSdk.js", mode: 'client' 
  ]

最后创建了 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>

【问题讨论】：

***.com/questions/29133563/…

这能回答你的问题吗？ How to add a 3rd party script code into Nuxt?

在我上面链接的评论之上，你应该知道s-s-r: false 已被弃用，现在是mode: 'client'。此外，您需要使用它或 client.js，而不是两者都使用，如您在此处看到的：nuxtjs.org/docs/configuration-glossary/configuration-plugins

@Cbroe @kissu 感谢您提供有用的 cmets。我已经实施了这两种解决方案，不幸的是问题仍然存在。我稍微修改了我的原始帖子，以包括对我为解决问题所采取的步骤的解释。 @kissu 关于 s-s-r: false 的好点已弃用，应使用 client.js 或 mode: 'client' 来防止 nuxt s-s-r 渲染。

【参考方案1】：

有解决问题的办法。

我已经创建了单独的组件 FbShareButton.vue

按照this 和this 的帖子，将所有逻辑（包括Facebook SDK 加载）放入该组件中。

因此：

<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>