背景:
我正在使用 Nuxt 构建一个 SSR 网站。我想运行脚本到 fix some typography issues (标题中的孤立文本)。在呈现 DOM 之后,我无法执行此操作。我怎样才能实现这个函数一次,以便它在呈现每个页面的 DOM 后运行?它可以在路由器中或在 Nuxt 布局中,或其他地方。
我尝试过的:
在我的
layout.vue
中,Mounted()
仅在第一次加载时运行(如预期的那样)并添加$nextTick
似乎没有影响。对于从真实网络服务器提供的生成的静态页面也是如此。在我的
layout.vue
中,使用 Vue 的Updated()
似乎永远不会触发。我认为这意味着 Nuxt 正在阻碍。使用
app.router.afterEach()
该函数在每次路由更改时运行(包括第一次加载),但在 DOM 渲染之前运行,因此它毫无值(value)。如果我将
Vue.nextTick()
添加到.afterEach()
中,该函数会在路由更改之前在当前页面上运行(您可以看到它闪烁)但在此之前不会运行。
有效但看起来很愚蠢的方法:
将函数放在每个页面的 Mounted()
block 中。
mounted: function(){
this.$nextTick(function () {
const tm = new TypeMate(undefined, { selector: 'h2, h3, p, li' });
tm.apply();
})
},
但这似乎是个坏主意,尤其是当我们添加页面时。我错过了什么?有没有聪明的方法来做到这一点? Nuxt 的文档对于其中的一些内容几乎毫无用处。
最佳答案
您可以创建 mixin带挂载功能。来自 mixin 的生命周期 Hook 将与您的生命周期事件合并,并且每个事件都将运行。
关于javascript - 在 Nuxt.js 中完全呈现路由后运行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55695816/