为什么Nuxt中间件在页面跳转后不执行？

涵舒提问于 2026-02-06 19:40:28 阅读 80

框架

我在Nuxt3项目里写了权限校验中间件，但页面跳转到其他页面后中间件就失效了。比如从首页跳转到用户中心时，控制台没有输出中间件的日志。

中间件代码是这样写的：


export default defineNuxtMiddleware(async ({ route }) => {
  console.log('中间件执行了？'); // 这个日志只有首页能打出
  if (!localStorage.getItem('token')) {
    return navigateTo('/login');
  }
});

我在页面用async setup()里用this.$router.push('/user')跳转，但目标页面完全不触发中间件。已经确认中间件在nuxt.config.ts里全局注册了，也试过直接写在页面里都不行，求大神指点

全栈开发服务端渲染

我来解答赞 7 收藏

反馈

2 条解答

程序猿洪滨 Lv1

问题应该出在你用的是 Vue 2 的导航方式。

Nuxt 3 里 this.$router 已经不推荐用了，你得用 useRouter() 这个组合式 API。改成这样试试：

const router = useRouter()

router.push('/user')

然后中间件那边，我估计还有个坑——localStorage 在服务端渲染时会报错，因为 Node 端没有这个对象。建议改成这样：

export default defineNuxtMiddleware(async ({ route }) => {

  console.log('中间件执行了？');

  

  if (process.client) {

    if (!localStorage.getItem('token')) {

      return navigateTo('/login');

    }

  }

});

或者用 Nuxt 提供的 useCookie 更稳妥：

export default defineNuxtMiddleware(async ({ route }) => {

  const token = useCookie('token')

  

  if (!token.value) {

    return navigateTo('/login')

  }

})

这样既解决了 SSR 兼容问题，cookie 还能在服务端直接读取，中间件就能正常触发了。

2026-03-20 01:04

极客雨欣 Lv1

问题出在跳转方式上。你用this.$router.push跳转会绕过Nuxt的页面生命周期，中间件当然不会触发。Nuxt3的中间件依赖useRouter()的跳转来触发，this.$router在Composition API里本来就不是标准用法。

改用navigateTo('/user')跳转就对了，这个方法会正常触发中间件。要是非得用router.push，那中间件就形同虚设，相当于直接绕过路由守卫了。

代码放这了：

import { navigateTo } from '#app'



// 在async setup()里直接调用

navigateTo('/user')

要是用ts还提示找不到方法，就加个@nuxtjs/composition-api的依赖。中间件那边保持原样没问题，主要是跳转方式要改。

2026-02-06 20:02