vue-router学习5：重定向和别名

重定向（Redirects）和别名（Aliases）是两种用于管理路由的方式，它们允许你以不同的 URL 访问相同的内容或者将某个 URL 重定向到另一个 URL。

重定向（Redirects）

重定向允许你将一个路由映射到另一个路由，即当用户访问某个 URL 时，自动将其重定向到另一个 URL。使用 redirect 属性来定义重定向。

<!-- router/index.ts -->  
import { createRouter, createWebHistory } from 'vue-router';  
  
const routes = [  
  {  
    path: '/old-path',  
    redirect: '/new-path' // 当访问 /old-path 时，会自动重定向到 /new-path  
  },  
  {  
    path: '/new-path',  
    name: 'NewPath',  
    component: () => import('@/views/NewPath.vue')  
  },  
  // ...其他路由  
];  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes  
});  
  
export default router;

在上面的例子中，当用户尝试访问 /old-path 时，他们会被自动重定向到 /new-path。

别名（Aliases）

别名允许你为路由定义一个或多个额外的 URL，这些 URL 都会映射到同一个路由组件。在路由配置中使用 alias 属性来定义的。

<!-- router/index.ts -->  
import { createRouter, createWebHistory } from 'vue-router';  
  
const routes = [  
  {  
    path: '/users/:id',  
    name: 'User',  
    component: () => import('@/views/User.vue'),  
    alias: '/u/:id' // 定义别名，使得访问 /u/:id 时也展示 User 组件  
  },  
  // ...其他路由  
];  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes  
});  
  
export default router;

在这个例子中，User 组件可以通过 /users/:id 和 /u/:id 这两个路径来访问。无论用户访问哪一个路径，都会展示同一个 User 组件，并可以通过 $route.params.id 来获取用户 ID。