【问题标题】：Re-run external JavaScript with NuxtLink使用 NuxtLink 重新运行外部 JavaScript
【发布时间】：2021-06-05 20:18:23
【问题描述】：

我正在为我的 Nuxt 应用程序的客户端/前端设计使用多个外部 JavaScript 文件（Nuxt 通用模式，服务器端渲染 + 客户端导航），将它们放在 nuxt.config.js-文件。

nuxt.config.js

<script>
export default {
  head () {
    return {
      script: [
        { src: '/scripts/jquery.min.js', body: true },
        { src: '/scripts/jquery.dropotron.min.js', body: true },
        { src: '/scripts/browser.min.js', body: true },
        { src: '/scripts/breakpoints.min.js', body: true },
        { src: '/scripts/util.js', body: true },
        { src: '/scripts/main.js', body: true },
        { src: '/scripts/owa.js', body: true }
      ]
    }
  }
}
</script>

在初始页面浏览中一切正常，但不幸的是，当使用 NuxtLink 导航到另一个页面时，EventListener 消失了。我由此得出结论，虚拟 DOM 被重新渲染，但一旦完成，JavaScript 函数就不会再次运行。

当然，我可以使用 a-Tags 代替 NuxtLink，这样整个站点将再次加载，脚本也会如此，但这是不好的做法，与 SPA 无关。

我已经尝试过 Nuxt 中间件，但删除 Head 中的脚本（见示例代码）不起作用。

middleware/rerunJs.js

  const scripts = context.app.head.script
  context.app.head.script = undefined
  context.app.head.script = scripts

任何想法将不胜感激！

更新

客户端控制台输出 - 初始页面加载

Logging: rerunJs.js in middleware directory
Server based middleware
Print context.app.head.script:
[
  { src: '/scripts/jquery.min.js', body: true, defer: true },
  { src: '/scripts/jquery.dropotron.min.js', body: true, defer: true },
  { src: '/scripts/browser.min.js', body: true, defer: true },
  { src: '/scripts/breakpoints.min.js', body: true, defer: true },
  { src: '/scripts/util.js', body: true, defer: true },
  { src: '/scripts/main.js', body: true, defer: true },
  { src: '/scripts/owa.js', body: true }
]
Logging: index.vue in Nuxt pages directory
Logging: jquery.dropotron.min.js in static/scripts directory
Logging: main.js in static/scripts directory

客户端控制台输出 - 使用 NuxtLink 导航到路由“/”

Logging: rerunJs.js in middleware directory
Client based middleware
Print context.app.head.script:
Array(7) [ {…}, {…}, {…}, {…}, {…}, {…}, {…} ]

【问题讨论】：

您是否正在运行检查元素是否在加载时可抓取？显示的任何错误，如果脚本正在加载并且您可以通过添加一个简单的 console.log("loaded file 12345") 来确定，我认为这是因为当整个页面加载并且事情没有运行时您没有运行脚本不及时。模板可以引发这个问题/等等。
window.onload = () => {};也许试试这个，嵌套在这个函数中的任何东西都应该在完全加载时加载。
这是一个非常广泛的问题。这在很大程度上取决于您尝试运行的代码中的实际内容。还取决于您加载它们的方式。您基本上可以将其加载到 Nuxt 插件中。但我不确定将 jQuery 用于像 Nuxt 这样的现代产品是一个好主意，因为 jQuery 是必不可少的。更喜欢使用 VueJS，它是声明式的编码风格。因此，使用“状态”而不是 DOM 事件是当今的首选方式。您将对事物有更多的控制权，并且有很多工具可以帮助您。
@blanknamefornow 我确实写过支票。正如您在更新中看到的，Nuxt 生命周期从中间件（if-statement: process.server 或 process.client）开始。紧随其后的是 index.vue 页面中的 JS。然后带有脚本的负责人开始运行它们。这些外部脚本由 IIFE 组成。例如 dropotron 脚本：(function(e){ jquery.dropotron.min.js code ... })(jQuery); 当然，在使用“NuxtLink”时，IIFE 内部没有日志记录。此外，数组的打印方式不同。
@blanknamefornow 必须有一种 Nuxt 方式来执行诸如“window.onload = () => {};”之类的操作。当我把它放在 pages/index.vue 的脚本部分时，它会抛出错误窗口未定义。在使用 NuxtLink 加载页面后，我在文档中搜索了一个运行 JS 的地方，但没有找到任何东西。

标签： javascript dom nuxt.js single-page-application pageload

【解决方案1】：

解决方案

要在使用 NuxtLink 导航到另一个页面时重新运行外部 JavaScript（即 jQuery），并且 Nuxt 设置为通用模式，需要使用两个生命周期挂钩。

首先，中间件应该从头中删除脚本。请确保，只有客户端会删除脚本。在初始页面加载时，中间件是基于服务器的，脚本会运行，即使没有触发它们。

middleware/rerunJs.js

...
  if (process.client) {
    context.app.head.script = undefined
  }
...

之后，所需页面的mounted-Hook 应将脚本附加到正文的开头和结尾。

pages/index.vue

...
  mounted () {
    (function LoadMyJs () {
      const docHeadObj = document.getElementsByTagName('head')[0]
      const jqueryScript = document.createElement('script')
      jqueryScript.outerHTML = '<scr' + 'ipt data-n-head="ssr" src="/scripts/jquery.min.js" data-body="true">' + ' </scr' + 'ipt>'
      jqueryScript.src = '/scripts/jquery.min.js'
      jqueryScript.defer = true

      docHeadObj.appendChild(jqueryScript)

      document.body.innerHTML = document.body.innerHTML + queryScript.outerHTML 
    }())
  }
...

【讨论】：