Vue Router 怎么设置路由重定向实现默认页面-Vue.js-PHP中文网

最常用且推荐的方式是在路由配置中为根路径 / 添加 redirect 字段，如 { path: '/', redirect: '/home' }，实现访问 / 时自动跳转至 /home 或其他默认页面，兼容 Vue 2 和 Vue 3。

vue router 怎么设置路由重定向实现默认页面

Vue Router 设置路由重定向来实现默认页面，最常用也最推荐的方式是在路由配置中为根路径 / 添加 redirect 字段。它简单、明确、符合约定，且在 Vue 2 和 Vue 3（搭配 createRouter）中写法一致，只是 API 略有差异。

直接在根路径配置 redirect（最常用）

这是项目中最主流的做法：访问 / 时自动跳转到你指定的默认页，比如 /home 或 /dashboard。

Vue 2 写法（基于 new Router）：

```js
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', name: 'Home', component: () => import('@/views/Home.vue') },
{ path: '/about', component: () => import('@/views/About.vue') }
];
```

Vue 3 + Vite 写法（基于 createRouter）：

```js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', name: 'Home', component: () => import('@/views/Home.vue') },
]
```

用户打开网站时，地址栏会从 / 变成 /home，并渲染对应组件。

用命名路由重定向（更健壮）

当目标路由已定义 name，建议用对象形式重定向。这样即使将来改了路径（比如把 /home 改成 /dashboard），只要 name: 'Home' 不变，根路径重定向依然有效，无需同步修改 redirect 字符串。

```js
{ path: '/', redirect: { name: 'Home' } }
```

注意：name 必须在目标路由中明确定义，否则会报错 “Named route 'xxx' has not been registered”。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

捕获所有未匹配路径（兜底重定向）

除了根路径，通常还建议加一条通配规则，防止用户输入错误路径或旧链接失效：

```js
{ path: '/:pathMatch(.*)*', redirect: '/' }
```

这条规则放在路由数组末尾，意思是：任何不匹配前面所有 path 的地址，都重定向回根路径（进而触发上面的 / → /home 跳转）。Vue 3 中使用 :pathMatch(.*)*，Vue 2 中对应写法是 * 或 /\*\/?。

不推荐：仅靠 `path: '/'` 配置组件（非重定向）

有人会直接写：

```js
{ path: '/', component: Home }
```

这确实能让首页显示，但它不是“重定向”，而只是把 / 当作一个普通路由。问题在于：如果你后续想统一入口为 /home（比如 SEO 规范、权限控制、埋点统计），就得手动改所有地方；而且无法复用 name: 'Home' 的语义化优势。所以除非项目极小且无扩展需求，否则建议坚持用 redirect 方式。