在 Nuxt.js 中完全呈现路由后运行函数

Posted 2023-02-22

【中文标题】在 Nuxt.js 中完全呈现路由后运行函数

【英文标题】：Run function AFTER route fully rendered in Nuxt.js

【发布时间】：2019-09-05 19:51:09

【问题描述】：

背景：

我正在使用 Nuxt 构建一个 s-s-r 网站。我想运行一个脚本到fix some typography issues（标题中的孤立文本）。在渲染 DOM 之前，我不能这样做。我怎样才能实现这个函数一次，让它在每个页面的 DOM 被渲染后运行？它可以在路由器中，也可以在 Nuxt 布局中，或其他地方。

我尝试过的：

在我的layout.vue 中，Mounted() 仅在第一次加载时运行（如预期的那样），添加 $nextTick 似乎对此没有影响。甚至对于从真实网络服务器提供的生成的静态页面也是如此。

在我的 layout.vue 中，使用 Vue 的 Updated() 似乎永远不会触发。我认为这意味着 Nuxt 正在阻碍。

使用app.router.afterEach()，该函数在每次路由更改（包括第一次加载）时运行，但在渲染 DOM 之前，它变得毫无价值。

如果我将 Vue.nextTick() 添加到 .afterEach() 中，该函数会在路径更改之前在当前页面上运行（您可以看到它闪烁），但在此之前不会运行。

有效但看起来很愚蠢的方法：

将函数放在每个页面的Mounted() 块中。

mounted: function()
    this.$nextTick(function () 
    const tm = new TypeMate(undefined,  selector: 'h2, h3, p, li' );
    tm.apply();
     
    )
  ,

但这似乎是个坏主意，尤其是在我们添加页面时。我错过了什么？有没有聪明的方法来做到这一点？ Nuxt 的文档对于其中的一些内容几乎毫无用处。

【参考方案1】：

您可以使用挂载功能创建mixin。来自 mixin 的生命周期钩子将与您的生命周期事件合并，并且每个都将运行。

【讨论】：

嗯，谢谢@Aldarund，这与 Nuxt 中的插件相同还是在较低级别上起作用？

@BryceHowitson 较低。例如。如果你想要全局混入，你可以创建 nuxt 插件，你只需放置这个混入

我们不能在layout 本身中添加readystatechange 事件吗？