时间戳

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

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

问题描述

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

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

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

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

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

有谁知道如何触发每页加载的窗口加载？

标签： vue.jsnuxt.js

解决方案

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

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

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

window.location.href = 'your link'

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

推荐阅读