如何在Nuxt中实现路由切换后执行的afterEach钩子？

别担心，虽然Nuxt的官方中间件主要聚焦在路由跳转前的逻辑（也就是你提到的beforeEach场景），但我们完全可以借助Vue Router的原生能力来实现全局的afterEach钩子——毕竟Nuxt底层就是基于Vue Router构建的嘛！

下面分不同Nuxt版本给你具体的实现方案：

Nuxt 3 实现方式 #

在Nuxt 3里，我们可以通过**插件（Plugin）**来获取路由实例，然后注册afterEach钩子：

1. 在项目的plugins目录下新建一个文件，比如router-after-each.ts（或.js，根据你的项目配置）
2. 写入以下代码：

export default defineNuxtPlugin((nuxtApp) => {
  // 获取Vue Router实例
  const router = nuxtApp.$router

  // 注册afterEach钩子
  router.afterEach((to, from) => {
    // 这里就是路由切换完成后要执行的逻辑
    console.log(`✅ 路由切换完成：从 ${from.path} 跳转到 ${to.path}`)
    // 比如页面埋点、滚动到顶部、更新页面标题这类操作都可以放在这里
  })
})

Nuxt会自动识别并加载plugins目录下的插件，不需要额外配置。

Nuxt 2 实现方式 #

对于Nuxt 2，同样可以通过插件来实现，步骤类似：

1. 在plugins目录下新建after-each.js文件
2. 写入代码：

export default ({ app }) => {
  // 直接通过app.router获取路由实例
  app.router.afterEach((to, from) => {
    console.log(`✅ 路由切换完成：从 ${from.fullPath} 到 ${to.fullPath}`)
    // 执行你的业务逻辑，比如统计页面访问量
  })
}

如果你的插件没有被自动加载，可以在nuxt.config.js里的plugins数组中手动注册：

export default {
  plugins: [
    '~/plugins/after-each.js'
  ]
}

补充说明 #

• 如果你只是需要单个页面在路由切换完成后执行逻辑，也可以在页面组件中使用onMounted钩子，或者监听useRoute()的变化，但全局的afterEach还是用上面的插件方案更高效。
• Vue Router的afterEach钩子会在**路由跳转完全完成（包括页面组件渲染完毕）**后触发，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Chris