当前位置：首页 > news >正文

Vue Router （重定向和别名）

news 2025/11/12 9:56:38

1、重定向

1.1 定义

重定向（Redirect） 是指当用户访问某个 URL 时，服务器或前端路由机制让浏览器自动跳转到另一个 URL 的过程。

换句话说：用户请求页面 A，但服务器/应用让浏览器去访问页面 B。

1.2 用途

网站改版后，旧链接跳转到新链接（保持 SEO 权重和用户体验）
用户访问未登录页面，重定向到登录页
HTTP 到 HTTPS 的强制跳转
将多个域名统一跳转到一个主域名（如 www.example.com→ example.com）
临时维护页面跳转
404 页面引导用户到首页或其他有效页面

1.3 类型

状态码	名称	请求方法是否可保持	典型用途	是否推荐用于 POST 后跳转
301	Moved Permanently	✅（但浏览器一般用 GET）	永久重定向，SEO 权重转移	❌ 不推荐，会变成 GET
302	Found (Temporary)	✅（但大多数浏览器强行用 GET）	临时跳转	⚠️ 不安全，多数浏览器会转为 GET
303	See Other	❌ 必须用 GET	POST 后跳转查看结果、表单提交后展示页	✅ ✅ 推荐使用
307	Temporary Redirect	✅ 保持原请求方法（如 POST）	临时重定向，保持方法不变	✅ 适用于需要保持 POST 的场景
308	Permanent Redirect	✅ 保持原请求方法	永久重定向，保持方法不变	✅ 适用于 API 永久迁移且要保持方法

1.4 基本用法

在 Vue Router 的路由配置中，可以为某个 path 路径设置 redirect 属性，当用户访问该路径时，不会渲染该路径对应的组件，而是自动导航（重定向）到另一个路径。

重定向也是通过 routes 配置来完成，下面例子是从 /home 重定向到 /：

const routes = [{ path: '/home', redirect: '/' }]

重定向的目标也可以是一个命名的路由：

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

甚至是一个方法，动态返回重定向目标：

const routes = [{// /search/screens -> /search?q=screenspath: '/search/:searchText',redirect: to => {// 方法接收目标路由作为参数// return 重定向的字符串路径/路径对象return { path: '/search', query: { q: to.params.searchText } }},},{path: '/search',// ...},
]

注意：在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

2、相对重定向

const routes = [{// 将总是把/users/123/posts重定向到/users/123/profile。path: '/users/:id/posts',redirect: to => {// 该函数接收目标路由作为参数return to.path.replace(/posts$/, 'profile')},},
]

3、别名（alias）

3.1 定义

Alias（别名） 可以让一个路由拥有多个“访问路径”，用户访问别名路径时，实际展示的是目标路由的内容，但 URL 保持为别名路径本身，不会发生跳转

3.2 基本用法

路径是/home，实际跳转的是/

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

提供多个别名：

const routes = [{path: '/users',component: UsersLayout,children: [// 为这 3 个 URL 呈现 UserList// - /users// - /users/list// - /people{ path: '', component: UserList, alias: ['/people', 'list'] },],},
]