使用来自 API 响应的数据在 Nuxt JS 应用程序中的标签内注入动态内容

Question

我目前正在开发一个 NUXT 应用程序，其中有必要在所选页面的<head>部分中添加一些动态内容。 需要插入页面<head>的内容来自应用程序初始启动时的一次性 API 响应 (nuxtServerInit)。 这将依次存储在 VUEX 中。 object 结构看起来像

[{
   pages:['index','home','..',....],
   script:'<script>....</script><script>...</script>,<link href="someCss.css</link>"'
},
{
   pages:['about','..',...],
   script:'<script>....</script><script>...</script>,<link href="someOtherCss.css</link>"'
}]

所以脚本应该根据配置注入/删除到页面的<head>部分（即关键脚本内的内容应该放在<head>内）。 我对此进行了研究，发现 NUXT 提供了一个头 function 可以在组件/布局中使用，该 ZC1C425268E68385D1AB5074C17A94F14 返回的 object 可以基于页面动态构建路由名称

//dynamically generate head scripts based on page route 
head () {
    return getScriptsForThisPage()        
  }

但问题是关键脚本包含脚本、外部链接、元信息，应该直接在<head>标记内使用。 所以这些解析逻辑需要写在 function getScriptsForThisPage() 中才能使用 NUXT head() function。 如果我们可以直接将脚本键中的任何内容附加到<head>标记中，那将会很方便。

有没有比这更好/更聪明的方法

更新 - <head>应该在加载页面之前填充（SEO 目的），所以我们不应该使用客户端 DOM 操作方法

Answer 1

您是否尝试过基本的 DOM 技术，例如：

  document.head.appendChild

和或::

 document.head.removeChild

内置 function 从现有节点或根元素中添加和删除节点的方法？

那是在您预处理 JSON 响应并创建\解析 html 标签到 html 元素之后。

Answer 2

由于应用程序正在从 nuxt 服务器 init 获取数据，您可以做的是将该信息存储为内部 nuxt state 的一部分（例如，通过 vuex 传递该数据）并根据页面 state 更新头部。
或者，您可以利用 asyncdata（用于在页面创建之前调用远程 API）。 这对于 SSR 在页面创建之前动态更改数据非常有用。 这样，您可以根据 asyncData 具有配置时设置的任何内容来设置头脚本。

使用来自 API 响应的数据在 Nuxt JS 应用程序中的标签内注入动态内容

问题描述

2 个解决方案

解决方案1
0 2020-05-14 08:17:15

解决方案2
0 2020-05-15 14:33:33

使用来自 API 响应的数据在 Nuxt JS 应用程序中的标签内注入动态内容

问题描述

2 个解决方案

解决方案1 0 2020-05-14 08:17:15

解决方案2 0 2020-05-15 14:33:33

解决方案1
0 2020-05-14 08:17:15

解决方案2
0 2020-05-15 14:33:33