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

关键词：

【中文标题】在 Nuxt.js 中完全呈现路由后运行函数【英文标题】：Run function AFTER route fully rendered in Nuxt.js 【发布时间】：2019-09-05 19:51:09 【问题描述】：

背景：

我正在使用 Nuxt 构建一个 s-s-r 网站。我想运行一个脚本到fix some typography issues（标题中的孤立文本）。在渲染 DOM 之前，我不能这样做。我怎样才能实现这个函数一次，让它在每个页面的 DOM 被渲染后运行？它可以在路由器中，也可以在 Nuxt 布局中，或其他地方。

我尝试过的：

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

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

使用app.router.afterEach()，该函数在每次路由更改（包括第一次加载）时运行，但在渲染 DOM 之前，它变得毫无价值。

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

有效但看起来很愚蠢的方法：

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

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

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

【问题讨论】：

【参考方案1】：

您可以使用挂载功能创建mixin。来自 mixin 的生命周期钩子将与您的生命周期事件合并，并且每个都将运行。

【讨论】：

嗯，谢谢@Aldarund，这与 Nuxt 中的插件相同还是在较低级别上起作用？ @BryceHowitson 较低。例如。如果你想要全局混入，你可以创建 nuxt 插件，你只需放置这个混入 我们不能在layout 本身中添加readystatechange 事件吗？

页面完全呈现后运行 javascript

】页面完全呈现后运行javascript【英文标题】：Runningjavascriptafterpageisfullyrendered【发布时间】：2012-01-2613:22:24【问题描述】：我正在尝试创建一个语法高亮脚本。我尝试在具有10000行的代码上使用我的脚本，但我看到的只是加载时... 查看详情

快来用nuxt开发静态网站

...nuxtstart真是太棒了。target:'static'+nuxtgenerate生成的【完全静态】的应用又是什么意思呢？与之前generate生成的静态应用有什么区别？我们先来看一下Nuxt官网的一张图，阐述了Nuxt.js应用一个完整的服务器请求到渲染（或用户... 查看详情

如何在 nuxt.js 中定义路由

】如何在nuxt.js中定义路由【英文标题】：Howtodefinerouteinnuxt.js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

如何在实际服务中运行 nuxt.js？

】如何在实际服务中运行nuxt.js？【英文标题】：Howtorunnuxt.jsinrealservice?【发布时间】：2017-10-2817:56:32【问题描述】：我在中使用了vue-clivueinitnuxt/expressmyProject和，npm运行开发开发。但是，npm运行构建之后，创建了dist文件。如何在... 查看详情

Vuetify Nuxt.js：如何在轮播图标中添加路由链接

】VuetifyNuxt.js：如何在轮播图标中添加路由链接【英文标题】：VuetifyNuxt.js:howtoaddRoutinglinkinCarouselsicon【发布时间】：2021-01-1301:19:14【问题描述】：js和Vuetfiy我想在Carousels图标中添加路由链接。如果我按图标，它应该打开路由链接... 查看详情

nuxt.js服务端渲染中如何实现路由的跳转

一、nuxt.js路由跳转1、nuxt-link标签跳转在html标签内使用nuxt-link跳转，相应于超链接a标签，使用方式如下：<nuxt-linkto="/">首页</nuxt-link>2、编程式导航-JS代码内部跳转实际项目中，很多时候都是通过在JS代码内部进行导航的... 查看详情

如何在 nuxt.js 上手动触发路由？

】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情

NUXT.js 和 Axios 运行时如何避免代码重复？

】NUXT.js和Axios运行时如何避免代码重复？【英文标题】：HowtoavoidcodeduplicationwhenrunningNUXT.jsandAxios?【发布时间】：2020-11-2205:28:43【问题描述】：如果相似的代码（如示例中）在不同的组件中重复，但我在函数参数中传递的名称略... 查看详情

在 Docker 中运行 nuxt js 应用程序

】在Docker中运行nuxtjs应用程序【英文标题】：RunningnuxtjsapplicationinDocker【发布时间】：2017-09-3012:03:16【问题描述】：我正在尝试在docker容器中运行nuxt应用程序。为此，我创建了以下Dockerfile：FROMnode:6.10.2RUNmkdir-p/appEXPOSE3000COPY./appWO... 查看详情

您如何在 Nuxt JS (s-s-r) 中使用来自无头 CMS 的路由？

】您如何在NuxtJS(s-s-r)中使用来自无头CMS的路由？【英文标题】：HowdoyouuseroutesfromaheadlessCMSinNuxtJS(s-s-r)?【发布时间】：2020-10-0100:43:59【问题描述】：问题我正在尝试使用CMS定义的路由来获取内容，该内容用于确定在我的Nuxt前端中... 查看详情

vue-awesome-swiper使用教程

...ponents、layouts、pages、plugins、nust.config.js目录及文件Ⅳ.Nuxt路由➀.pages目录结构自动生成对应的路由配置➁路由跳转注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面③动态路由④路由参... 查看详情

在更新流星模板后运行函数

...关的数据（对象列表）发生更改时，该函数都会运行。我完全不确定这是做我想做的事情的最佳方式，但是每次我添加/删除/重新排列对象时它都 查看详情

一旦 HTML 在 Angular 4 中完全动态呈现，如何在 jQuery 中调用函数？

】一旦HTML在Angular4中完全动态呈现，如何在jQuery中调用函数？【英文标题】：HowcanIcallafunctioninjQueryonceHTMLiscompletelyrendereddynamicallyinAngular4?【发布时间】：2018-06-1201:10:59【问题描述】：我正在使用Angular4作为我的Web模板。一旦在构... 查看详情

Nuxt.js 中不同子域的不同路由

】Nuxt.js中不同子域的不同路由【英文标题】：DifferentroutesfordifferentsubdomainsinNuxt.js【发布时间】：2019-07-2006:35:20【问题描述】：假设有两个子域为一个nuxt实例工作。他们应该有不同的页面结构。例如可以是：pages/index.vue//technicale... 查看详情

Nuxt.js 嵌套路由加载问题

】Nuxt.js嵌套路由加载问题【英文标题】：Nuxt.jsnestedrouteloadingissue【发布时间】：2021-01-0203:11:36【问题描述】：以上所有代码均来自我在pages/apibuilder/models文件夹中的文件_id.vue我用它来用数据填充我的商店asyncasyncData(store)//this.data... 查看详情

如何为模态对话框中呈现的对象运行观察函数？

】如何为模态对话框中呈现的对象运行观察函数？【英文标题】：Howtorunanobservefunctionforanobjectrenderedinmodaldialog?【发布时间】：2021-12-2709:53:57【问题描述】：进一步说明：取消注释observe()部分并在input$periods下面插入req(input$matrix2)... 查看详情

在 Paketo.io / Cloud Native Buildpacks 构建的 Docker 容器中运行 Nuxt.js

】在Paketo.io/CloudNativeBuildpacks构建的Docker容器中运行Nuxt.js【英文标题】：RunningNuxt.jsinDockerContainerbuildbyPaketo.io/CloudNativeBuildpacks【发布时间】：2021-08-2413:21:06【问题描述】：我想将我的Nuxt.js应用程序容器化。我可以编写自己的Docker... 查看详情