vue.js - nuxt中挂载任意页面后触发函数

Question

是否可以在Nuxt中编写中间件，在挂载任何页面后触发。

如果我使用以下中间件

export default function ({ app }) {
  if (!process.server) {
    app.$somePluginFunction()
  }
}

它在导航到该页面时(即在安装它之前)被触发。这不是我想要的。

我也知道您可以在单个页面上使用 mounted() Hook ，这正是我想要的，但我不想编写相同的 mounted() code> 手动 Hook 到我的应用程序中的每个页面。我怎样才能做到这一点？

Answer 1

有很多方法可以在路由更改之前触发函数:

首次在默认布局中使用

// layout/default.vue
export default {
  watch: {
    $route () {
      console.log('route changed', this.$route)
    }
  },
}

路线前第二次使用:

https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

第三个编写插件是这样的:

how to write global router-function in nuxt.js

并像这样编写 mixin :

Run function AFTER route fully rendered in Nuxt.js