关键词：
【中文标题】当 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>
【讨论】：
如何在 Nuxt 中使路由区分大小写
】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情
如何在 nuxt.js 中编写全局路由器功能
】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情
Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误
】Vue.js和Nuxt.js中的Firebase存储CORS错误【英文标题】：FirebaseStorageCORSerrorinVue.jsandNuxt.js【发布时间】：2021-12-3020:32:31【问题描述】：我正在尝试从我的Web应用程序(Vue.js+Nuxt.js)下载存储在firebase-storage上的.pdf但是出现了这个错误访... 查看详情
我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据
】我想为vue.js(nuxt.js)中的每个组件加载和填充数据【英文标题】：Iwanttoloadandpopulatethedataforeachcomponentinvue.js(nuxt.js)【发布时间】：2017-11-2807:56:44【问题描述】：我按如下方式启动项目。vueinitnuxt/express我的目录是...components|-slider.vu... 查看详情
Vue.js 和 Nuxt.js
...注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情
nuxt的介绍以及入门(代码片段)
1.Nuxt.js服务器端渲染学习目标了解Nuxt.js的作用掌握Nuxt.js中的路由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVu... 查看详情
vue-awesome-swiper使用教程
...ponents、layouts、pages、plugins、nust.config.js目录及文件Ⅳ.Nuxt路由➀.pages目录结构自动生成对应的路由配置➁路由跳转注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面③动态路由④路由参... 查看详情
nuxt实践
...件middleware目录用于存放应用的中间件pages用于组织应用的路由及视图。Nuxt.js框架读取该目录下所有的.vue文件并自动生成对应的路由配置。plugins用于组织那些需要在根vue.js应用实例化之前需要运行的Jav 查看详情
如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试
...2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium.com/canariasjs/vue-ap 查看详情
如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？
...无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库（不包括css），但如上所述如何包含所需的模块。modules:[[\' 查看详情
更改 Nuxt.js 中间件中的内容
】更改Nuxt.js中间件中的内容【英文标题】：ChangethecontentinNuxt.jsmiddleware【发布时间】：2022-01-2021:29:24【问题描述】：有没有办法在中间件中改变响应的内容（例如页面）？我还应该提到我不想推送新路由（更改URL）。【问题讨论... 查看详情
Nuxt.js：无法生成路由
...ct/1、/project/2,...），这样当用户刷新页面时访问这些路线中的任何一条，页面仍然有效。但是在执行npmrungenerate时，我只得到Generatedroute&q 查看详情
nuxt.config.js 中的条件属性
】nuxt.config.js中的条件属性【英文标题】：Conditionalattributeinnuxt.config.js【发布时间】：2019-08-1615:13:30【问题描述】：我正在开发一个使用nuxt.js的网站，并且希望有条件地在nuxt.config.js中有一个配置选项：我想更改路由器我运行npmr... 查看详情
如何在 nuxt.js (vue.js) 中配置动态 og 标签？
】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情
如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading
】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情
Vue.js (Nuxt) 返回 JSON 数据
】Vue.js(Nuxt)返回JSON数据【英文标题】：Vue.js(Nuxt)ReturnJSONData【发布时间】：2021-10-1709:40:34【问题描述】：我尝试使用Nuxt.js制作JSONAPI。但是我请求了一个URL并且返回了html代码（网站的源代码。如：view-source:https://website.com）。我... 查看详情
Nuxt js (vue js) 禁用默认头链接
】Nuxtjs(vuejs)禁用默认头链接【英文标题】：Nuxtjs(vuejs)Disableddefaultheadlinks【发布时间】：2022-01-2306:32:26【问题描述】：我正在创建一个系统，我正在为我的应用程序的前端使用vue-nuxt框架。到目前为止，这是一个很棒的js框架，但... 查看详情
基于vue.js的ssr技术—nuxt.js
为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择，让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情