Rumah > hujung hadapan web > View.js > Contoh ubah hala laluan Vue Router dan tetapan alias

Contoh ubah hala laluan Vue Router dan tetapan alias

藏色散人
Lepaskan: 2022-08-10 14:16:00
ke hadapan
1847 orang telah melayarinya

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: '/' }]
Salin selepas log masuk

Sasaran yang diubah hala juga boleh menjadi satu Laluan:

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

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',
    // ...
  },]
Salin selepas log masuk

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' }]
Salin selepas log masuk

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'] },
    ],
  },]
Salin selepas log masuk

/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', ''] },
    ],
  },]
Salin selepas log masuk

[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!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan