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

Question

背景：

我正在使用 Nuxt 构建 SSR 网站。我想运行一个脚本来修复一些排版问题（标题中的孤立文本）。在渲染 DOM 之后，我无法执行此操作。我怎样才能实现一次这个函数，让它在每个页面的 DOM 被渲染后运行？它可以在 Router 中，也可以在 Nuxt Layout 中，也可以在其他地方。

我试过的：

1. 在我的layout.vue,Mounted()仅在第一次加载时运行（如预期的那样）并且添加$nextTick似乎不会影响它。对于从真正的网络服务器提供的生成的静态页面来说，情况也是如此。

2. 在我的 中layout.vue，使用 VueUpdated()似乎永远不会触发。我认为这意味着 Nuxt 妨碍了。

3. 使用app.router.afterEach()该函数在每次路由更改（包括第一次加载）时运行，但在 DOM 呈现之前的方式使其毫无价值。

4. 如果我添加Vue.nextTick()到.afterEach()功能在当前页面上运行，就在路线更改之前（您可以看到它闪烁），但在此之前不会运行。

什么有效但似乎很愚蠢：

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

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

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

Answer 1

您可以使用已安装的函数创建mixin。mixin 中的生命周期挂钩将与您的生命周期事件合并，并且每个事件都会运行。