Vue Router 경로 리디렉션 및 별칭 설정의 예

Redirect

예: 리디렉션은 사용자가 /home에 액세스할 때 URL이 /로 대체된 다음 /. /home 时，URL 会被 / 替换，然后匹配成 /。

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

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

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

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

也可以是一个方法，动态返回重定向目标：

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

别名

将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。

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

通过别名，可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。甚至可以将两者结合起来，用一个数组提供多个别名：

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

/people 是绝对路径的写法，即可以直接通过 /people 来访问。
list

리디렉션은 routes 구성을 통해서도 수행됩니다. 다음 예에서는 /home에서 /로 리디렉션합니다.

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },]

리디렉션된 대상일 수도 있습니다. 명명된 경로: rrreee 리디렉션 대상을 동적으로 반환하는 메서드일 수도 있습니다:

rrreeeAlias

별칭 ​​/에서 /home으로, 이는 다음을 의미합니다. 사용자가 /home에 액세스하면 URL은 여전히 ​​/home이지만 사용자가 /에 액세스하는 것처럼 일치됩니다. rrreee별칭을 사용하면 UI 구조를 🎜임의의 URL🎜에 자유롭게 매핑할 수 있으며 🎜구성된 중첩 구조에 의해 제한되지 않습니다🎜. 중첩된 경로 내의 경로가 🎜절대 경로🎜가 되도록 별칭을 /로 시작하세요. 둘을 결합할 수도 있습니다. 🎜배열을 사용하여 여러 별칭을 제공🎜: 🎜rrreee🎜/people은 절대 경로입니다. 즉, /people을 직접 전달할 수 있습니다. 입장.
list는 상대 경로입니다. 즉, URL은 상위 경로 → /users/list와 연결됩니다. 🎜🎜🎜참고🎜: 경로에 매개변수가 있는 경우 이를 절대 별칭에 포함해야 합니다. 🎜rrreee🎜[관련 권장 사항: 🎜vue.js 비디오 튜토리얼🎜]🎜🎜🎜

위 내용은 Vue Router 경로 리디렉션 및 별칭 설정의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!