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

本文介绍了在 Nuxt.js 中完全呈现的路由之后运行函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm building an SSR website using Nuxt. I want to run a script to fix some typography issues (orphaned text in headers). I can't do this UNTIL AFTER the DOM is rendered. How can I implement this function once so it runs after each page's DOM is rendered? It can be either in the Router or in a Nuxt Layout, or elsewhere.

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

In my layout.vue, Mounted() only runs on the first load (as expected) and adding $nextTick doesn't seem to affect that. This is even true for generated static pages served from a real webserver.

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

In my layout.vue, using Vue's Updated() never seems to fire. I assume this means Nuxt is getting in the way.

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

Using app.router.afterEach() the function runs on each route change (including first load), but way before the DOM is rendered making it worthless.

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

If I add Vue.nextTick() into the .afterEach() the function runs on the current page JUST BEFORE the route changes (you can see it flash) but DOES NOT run before that.

什么有效但似乎很愚蠢:

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

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

    })
  },

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

But this seems like a bad idea especially as we add pages. What am I missing? Is there a smart way to do this? Nuxt's documentation is next to useless for some of this stuff.

中完全呈现的路由之后运行函数

问题描述

什么有效但似乎很愚蠢:

推荐答案