在Nuxt.js中完全渲染后运行函数AFTER route

Question

背景：

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

我尝试过的事情：

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

2. 在我的layout.vue中，使用Vue的Updated()似乎从未触发过。我认为这意味着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的生命周期挂钩将与您的生命周期事件合并，并且每个事件都将运行。