Nuxt3项目如何将test.vue设为主视图而非index.vue？

当然可行，你之前的配置没生效是因为Nuxt3采用文件系统自动生成路由的机制，直接在nuxt.config.ts里配置router.routes会被自动生成的路由覆盖，而且写法也不符合Nuxt3的路由扩展规则。下面给你几种实用的解决方案：

方法1：直接重命名文件（最简单） #

不需要改任何配置，直接操作文件：

• 把pages/index.vue改名为其他名称（比如pages/home.vue）
• 把pages/test.vue改名为pages/index.vue

这样Nuxt会自动把新的index.vue作为根路径/的主视图，完全契合Nuxt的约定式路由规则，省心又高效。

方法2：通过路由扩展文件修改（适合不想改文件名的场景） #

Nuxt3推荐使用app/router.options.ts来扩展或修改路由，而非nuxt.config.ts。步骤如下：

1. 在项目根目录创建app/router.options.ts文件
2. 写入以下代码：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (existingRoutes) => {
    // 遍历现有路由，替换根路径的组件
    return existingRoutes.map(route => {
      if (route.path === '/') {
        return {
          ...route,
          // 动态导入test.vue作为根路由组件
          component: () => import('~/pages/test.vue')
        }
      }
      return route
    })
  }
}

3. 重启Nuxt服务，根路径/就会渲染test.vue的内容了

这个方法的核心是在路由生成的最后阶段修改现有路由，优先级高于自动生成的路由规则，所以能生效。

方法3：页面重定向（适合临时场景，地址栏会变化） #

如果只是临时需要，可以在原pages/index.vue里做重定向：

<script setup>
const router = useRouter()
// 页面加载时跳转到/test
router.push('/test')
</script>

不过这种方法会让地址栏从/变成/test，如果需要保持地址栏始终为/，不推荐用这个方法。

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