Contoh ubah hala laluan Vue Router dan tetapan alias

Ubah hala

Contoh: Ubah hala bermaksud apabila pengguna mengakses /home, URL akan Gantikan / dan padankan dengan /. Ubah hala

juga dilakukan melalui konfigurasi routes Contoh berikut mengubah hala dari /home ke /:

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

Sasaran yang diubah hala juga boleh menjadi satu Laluan:

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

juga boleh menjadi kaedah yang mengembalikan sasaran ubah hala secara dinamik:

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

Alias ​​​​

Alias ​​​​/ kepada /home, bermakna Apabila pengguna mengakses /home, URL masih /home, tetapi akan dipadankan seolah-olah pengguna mengakses /.

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

Dengan alias, anda boleh memetakan struktur UI secara bebas kepada URL arbitrari dan tidak dihadkan oleh struktur bersarang yang dikonfigurasikan. Jadikan alias bermula dengan / supaya laluan dalam laluan bersarang menjadi laluan mutlak. Anda juga boleh menggabungkan kedua-duanya, menggunakan tatasusunan untuk menyediakan berbilang alias :

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

/people ialah laluan mutlak, iaitu, ia boleh diakses terus melalui /people .
list ialah laluan relatif, iaitu, url akan disambung dengan laluan induk → /users/list.

Nota: Jika laluan itu mempunyai parameter, pastikan anda memasukkannya dalam sebarang alias mutlak:

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

[Cadangan berkaitan: video vue.js tutorial 】

Atas ialah kandungan terperinci Contoh ubah hala laluan Vue Router dan tetapan alias. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!