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

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

框架

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

中间件代码是这样写的：


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

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

全栈开发服务端渲染

我来解答赞 4 收藏

反馈

1 条解答

极客雨欣 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