Nuxt 3全局路由middleware中from.name引发无限重定向问题及方案验证

问题背景 #

项目页面结构：

pages
  index.vue
  new.vue

原本希望通过全局路由中间件实现从首页（/）重定向到/new页面，但以下代码触发了无限重定向：

export default defineNuxtRouteMiddleware((to, from) => {
  if (from.name === 'index') {
    return navigateTo({
      path: `/new`, 
      redirectCode: 301 
    });
  }
})

无限重定向的原因 #

你对from参数的理解存在偏差：

• 当用户直接通过地址栏访问首页时，这是首次路由导航，from是初始空路由对象，from.name为null/undefined，此时不会触发重定向。
• 全局中间件会在**每一次路由跳转（包括重定向触发的跳转）**时执行。当路由从首页切换到/new时，这次导航的from.name确实是index，你的代码判断该条件后会再次触发重定向到/new——而这次重定向的导航来源依然是首页，如此反复就形成了无限循环。

你的解决方案是否正确？ #

你添加to.path !== '/new'的条件后：

export default defineNuxtRouteMiddleware((to, from) => {
  if (from.name === 'index' && to.path !== '/new') {
    return navigateTo({
      path: `/new`, 
      redirectCode: 301 
    });
  }
})

这个方案是正确的。它通过判断目标路由不是/new时才执行重定向，避免了在已经跳转到/new时再次触发重定向，彻底终止了循环。

不过更贴合需求的写法是直接判断目标路由是否为首页，逻辑会更清晰：

export default defineNuxtRouteMiddleware((to) => {
  if (to.path === '/' || to.name === 'index') {
    return navigateTo({
      path: '/new',
      redirectCode: 301
    });
  }
})

这种写法直接针对「访问首页时重定向」的需求，无需依赖from参数，也能从根源避免循环问题。

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