Beispiele für Vue Router-Routenumleitung und Alias-Einstellungen

Umleitung

Beispiel: Umleitung bedeutet, dass, wenn der Benutzer auf /home zugreift, die URL durch / ersetzt und dann mit /. /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

Die Umleitung erfolgt auch über die Konfiguration von routes. Das folgende Beispiel leitet von /home nach / weiter:

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

Umgeleitetes Ziel Das kann auch sein eine benannte Route: rrreee Es ​​kann sich auch um eine Methode handeln, die das Umleitungsziel dynamisch zurückgibt:

rrreeeAlias

Alias ​​​​/ an /home, Das heißt dass, wenn ein Benutzer auf /home zugreift, die URL immer noch /home lautet, aber so abgeglichen wird, als ob der Benutzer auf / zugreift. rrreeeMit Aliasen können Sie die UI-Struktur frei einer 🎜beliebigen URL🎜 zuordnen und 🎜ist nicht durch die konfigurierte verschachtelte Struktur eingeschränkt🎜. Lassen Sie den Alias ​​mit / beginnen, sodass der Pfad innerhalb des verschachtelten Pfads zu einem 🎜absoluten Pfad🎜 wird. Sie können die beiden sogar kombinieren: 🎜Verwenden Sie ein Array, um mehrere Aliase bereitzustellen🎜: 🎜rrreee🎜/people ist ein absoluter Pfad, das heißt, Sie können /people direkt übergeben Zugang.
list ist ein relativer Pfad, das heißt, die URL wird mit dem Pfad des übergeordneten Elements zusammengefügt → /users/list. 🎜🎜🎜Hinweis🎜: Wenn die Route Parameter hat, stellen Sie sicher, dass Sie diese in alle absoluten Aliase einschließen: 🎜rrreee🎜【Verwandte Empfehlung: 🎜vue.js Video-Tutorial🎜】🎜🎜🎜

Das obige ist der detaillierte Inhalt vonBeispiele für Vue Router-Routenumleitung und Alias-Einstellungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!