Vue Router重定向失效求助：首次加载始终显示index.vue

你使用的是vue-router/auto（自动路由插件，即unplugin-vue-router），它会自动扫描src/pages目录生成路由规则，你手动定义的routes数组会被自动生成的路由覆盖，所以根路径/的重定向不生效，且自动路由默认将pages/index.vue绑定为/路径的组件，导致首次加载始终显示该页面。

方法一：切换为普通Vue Router（关闭自动路由） #

直接改用标准的Vue Router配置，让手动路由规则生效：

1. 修改路由文件的导入语句：

   // 把原来的 import 替换成普通vue-router
   import { createRouter, createWebHistory } from 'vue-router'
   import About from "@/pages/About"
   import Home from "@/pages/Home"
   

2. 保留你原有的routes配置和createRouter初始化代码，此时手动配置的重定向规则会正常生效：

   const routes = [
     { path: '/', redirect: '/about' },
     { path: '/about', redirect: '/home' },
     { path: '/home', name: 'home', component: Home }
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes: routes
   })
   
   export default router
   

3. 若不需要pages/index.vue，可以直接删除该文件，避免混淆。

方法二：保留自动路由，添加自定义重定向规则 #

如果你想继续使用自动路由，可以通过自定义路由文件让重定向规则被合并：

1. 在src/router目录下创建routes.js（或routes.ts）文件，写入自定义路由规则：

   import type { RouteRecordRaw } from 'vue-router'
   
   const routes: RouteRecordRaw[] = [
     { path: '/', redirect: '/about' },
     { path: '/about', redirect: '/home' }
   ]
   
   export default routes
   

2. unplugin-vue-router会自动识别这个文件，并将自定义路由与自动生成的路由合并，此时重定向规则会生效，自动生成的/home路由也会保留。

• 检查src/pages目录下的文件：自动路由会根据文件名生成路由，比如Home.vue对应/home，About.vue对应/about，确保这些文件存在且路径正确。
• 清除浏览器缓存后重新加载页面，避免路由缓存导致的异常。

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