window.addEventListener('load', (event) => {...});在 NuxtLink (nuxt-link) 或 RouterLink (router-link) 点击

【问题标题】：window.addEventListener('load', (event) => {...}); on NuxtLink (nuxt-link) or RouterLink (router-link) clickwindow.addEventListener('load', (event) => {...});在 NuxtLink (nuxt-link) 或 RouterLink (router-link) 点击
【发布时间】：2020-08-24 00:41:29
【问题描述】：

我将用最简单的例子来解释我的意思。

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

当页面首次加载时，客户端控制台会记录“页面已完全加载”。但是，当我单击 NuxtLink 或 RouterLink 时，我没有收到新页面加载的重复日志条目。

如果我使用标准链接，那么控制台会在我访问的页面上记录“页面已完全加载”，这是应该的。但它没有 NuxtLink 或 RouterLink 所完成的快速页面加载。

在 Rails 中，它有一个类似的功能称为 Turbolinks，但您可以使用 .on('page:load',... 来抓取每个页面加载。

有谁知道如何在每个页面加载时触发窗口加载？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

<nuxt-link> 组件类似于<router-link> 组件。

在 HTML5 历史模式下，router-link 会拦截点击事件，这样浏览器就不会尝试重新加载页面。这意味着onload只会在应用首次加载时触发。

如果每次链接到新路由时都需要刷新和加载页面，可以这样做：

window.location.href = 'your link'

通过这种方式链接到页面，可以在浏览器控制台的网络面板中发现每次从服务器加载text/html类型的页面。

【讨论】：

问题是我有一个在窗口加载时运行的第三方客户端脚本（基本上格式化 DOM）。安装新组件后，有什么方法可以捕获点击并触发？
您是否在nuxt.config.js 文件中配置了这个第三方脚本？
是的plugins: ['~/plugins/scripts.client.js']。我什至尝试过head: {script:[{src: '/js/scripts.client.js'}]}，希望它能在每页加载时加载它