Tutorial Asas VUE3: Penghalaan dan Navigasi

VUE3 ialah salah satu rangka kerja pembangunan bahagian hadapan yang paling popular pada masa ini, yang menyediakan cara yang mudah, fleksibel dan cekap untuk membina aplikasi web moden. Penghalaan dan navigasi ialah salah satu fungsi penting dalam rangka kerja VUE3, anda boleh menukar dan mengurus antara halaman dengan mudah.

Tutorial ini akan memperkenalkan konsep asas dan penggunaan penghalaan dan navigasi dalam rangka kerja VUE3, membantu anda memulakan dengan cepat dengan fungsi penghalaan dan navigasi VUE3.

1. Konsep asas penghalaan

Penghalaan merujuk kepada cara untuk mengakses halaman yang berbeza melalui URL yang berbeza. Dalam VUE3, penghalaan dilaksanakan melalui perpustakaan vue-router. vue-router menyediakan definisi laluan dan fungsi pengurusan.

Sebelum menggunakan vue-router, anda perlu memasang dan memperkenalkan perpustakaan vue-router. Kaedah pemasangan adalah seperti berikut:

npm install vue-router

Kaedah memperkenalkan perpustakaan vue-router adalah seperti berikut:

import { createRouter, createWebHashHistory } from 'vue-router'

Antaranya, createRouter ialah kaedah yang digunakan untuk mencipta laluan, dan createWebHashHistory menentukan penggunaan mod cincang untuk penghalaan.

Apabila menentukan laluan, anda perlu menentukan laluan dan komponen laluan. Laluan ialah URL untuk mengakses laluan dan komponen ialah komponen yang sepadan.

Contohnya:

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

Kod di atas mentakrifkan dua laluan, satu ialah laluan akar '/', komponen yang sepadan ialah '/about', komponen yang sepadan ialah Tentang .

Apabila membuat contoh penghalaan, anda perlu lulus dalam laluan yang ditentukan, seperti yang ditunjukkan di bawah:

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

sejarah menentukan mod penghalaan dan createWebHashHistory menunjukkan penggunaan mod cincang. Mod lain termasuk mod sejarah dan mod abstrak. laluan merujuk kepada tatasusunan konfigurasi penghalaan.

2. Konsep asas navigasi

Dalam VUE3, selepas mentakrifkan URL dan komponen yang sepadan melalui penghalaan, anda perlu menggunakan navigasi untuk bertukar dan melompat antara halaman.

Navigasi terutamanya merangkumi dua kaedah: navigasi program dan navigasi deklaratif.

2.1 Navigasi Programatik

Navigasi terprogram merujuk kepada melompat dan menukar halaman melalui kod JavaScript. Penghala Vue menyediakan beberapa kaedah untuk melaksanakan kaedah navigasi ini.

Berikut ialah beberapa kaedah yang biasa digunakan:

• router.push: digunakan untuk melompat ke halaman sasaran dan menambah rekod baharu pada sejarah penghalaan.

router.push('/home')

• router.replace: digunakan untuk melompat ke halaman sasaran, tetapi tidak menambah rekod baharu pada sejarah penghalaan.

router.replace('/home')

• router.go: Digunakan untuk bergerak ke hadapan atau ke belakang dengan bilangan langkah tertentu dalam sejarah penghalaan, yang boleh menjadi nombor positif atau negatif.

router.go(-1) //后退一步

2.2 Navigasi Deklaratif

Navigasi deklaratif merujuk kepada menukar dan melompat halaman dengan mengisytiharkannya dalam templat. Dalam Penghala Vue, anda boleh menggunakan komponen pautan penghala untuk melaksanakan navigasi perisytiharan.

komponen pautan penghala boleh dipaparkan sebagai teg, digunakan untuk melompat ke halaman melalui pautan penghalaan.

Contohnya:

<router-link to="/home">Home</router-link>

Kod di atas bermaksud memaparkan pautan dengan mengklik pautan akan melompat ke laluan '/home'.

Pada masa yang sama, komponen pautan penghala juga menyokong penghalaan dengan parameter, contohnya:

<router-link :to="{ path: '/user/'+userId }">User</router-link>

Kod di atas bermaksud memaparkan pautan dengan mengklik pautan akan melompat ke '/user Laluan /123' Antaranya, 123 ialah parameter yang ditentukan pengguna.

3. Konsep lanjutan penghalaan

Dalam VUE3, sebagai tambahan kepada penghalaan asas dan fungsi navigasi, terdapat juga beberapa konsep penghalaan lanjutan, seperti penghalaan bersarang dan penamaan. Laluan, pengawal laluan, dsb.

3.1 Sarang Laluan

Sarang laluan merujuk kepada menggabungkan berbilang laluan bersama-sama untuk membentuk hubungan ibu bapa-anak. Dalam VUE3, sarang laluan dicapai dengan menentukan sub-laluan.

Contohnya:

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        component: Home
      },
      {
        path: 'about',
        component: About
      }
    ]
  }
]

Dalam kod di atas, laluan induk bernama Layout ditakrifkan, yang mengandungi dua laluan anak, iaitu laluan akar '' dan '/about'. Laluan anak akan dipaparkan dalam laluan induk.

3.2 Penghalaan bernama

Penghalaan bernama merujuk kepada mentakrifkan nama untuk laluan untuk memudahkan panggilannya dalam program. Dalam Penghala Vue, nama laluan boleh ditakrifkan melalui atribut nama.

Contohnya:

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

Dalam kod di atas, laluan laluan akar '/' dan '/about' dinamakan home dan about masing-masing.

Dalam navigasi program dan navigasi deklaratif, lompatan halaman dan suis boleh dicapai melalui nama laluan yang sepadan.

3.3 Pengawal laluan

Pengawal laluan bermaksud apabila laluan melompat, proses lompat laluan boleh dikawal melalui beberapa fungsi cangkuk pratetap untuk mencapai beberapa keperluan khusus. Dalam VUE3, Vue Router menyediakan dua jenis pengawal laluan global dan pengawal laluan tempatan.

Pengawal laluan global merujuk kepada kawalan bersatu semua laluan dan biasanya digunakan untuk beberapa operasi global. Fungsi cangkuk pengawal penghalaan global termasuk: beforeEach, beforeResolve dan afterEach.

Pengawal laluan tempatan merujuk kepada kawalan khusus bagi laluan tertentu atau sekumpulan laluan, dan biasanya digunakan untuk beberapa operasi tempatan. Fungsi cangkuk pengawal laluan tempatan termasuk: beforeEnter, beforeRouteUpdate dan beforeRouteLeave.

Contohnya:

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

Dalam kod di atas, pengawal laluan global ditakrifkan melalui fungsi beforeEach ke dan dari masing-masing mewakili laluan akan datang dan laluan semasa, dan seterusnya mewakili fungsi untuk melepaskan laluan itu diperlukan Panggil fungsi seterusnya dalam pengawal untuk melakukan operasi lompatan penghalaan.

4. Ringkasan

Tutorial ini memperkenalkan konsep asas dan penggunaan penghalaan dan navigasi dalam rangka kerja VUE3, serta beberapa konsep lanjutan. Saya berharap melalui tutorial ini, anda boleh menguasai penggunaan asas penghalaan dan navigasi dalam VUE3, serta dapat menggunakan fungsi penghalaan dan navigasi dalam projek sebenar.

Atas ialah kandungan terperinci Tutorial Asas VUE3: Penghalaan dan Navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!