在Nuxt.js中完全渲染路线后运行功能

Question

背景：

我正在使用Nuxt建立一个SSR网站。我想运行一个脚本到fix some typography issues（标题中的孤立文本）。在呈现DOM之后，我无法执行此操作。我如何实现此功能，以便在呈现每个页面的DOM后运行？它可以在路由器或Nuxt布局中，也可以在其他地方。

我尝试过的：

1. 在我的layout.vue中，Mounted()仅在第一次加载时运行（如预期的那样）并且添加$nextTick似乎不会影响到这一点。对于从真实网络服务器提供的生成的静态页面，情况甚至如此。
2. 在我的layout.vue中，使用Vue的Updated()似乎永远不会开火。我认为这意味着Nuxt正在阻碍。
3. 使用app.router.afterEach()，该函数在每次路由更改（包括第一次加载）时运行，但是在呈现DOM之前使其变得毫无价值。
4. 如果我将Vue.nextTick()添加到.afterEach()中，该函数将在当前页面上运行JUST在路径更改之前（您可以看到它闪烁）但在此之前不运行。

什么有效，但似乎愚蠢：

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

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

    })
  },

但这似乎是一个坏主意，特别是当我们添加页面时。我错过了什么？有一种聪明的方法吗？对于这些东西，Nuxt的文档几乎没用。

Answer 1

您可以使用已安装的功能创建mixin。 mixin的生命周期钩子将与您的生命周期事件合并，每个钩子都将运行。