Fungsi penghalaan dalam Vue3: melaksanakan lompatan penghalaan untuk aplikasi SPA

Vue3 ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini, dan dalam kemas kini terbaru, Vue3 telah memperkenalkan beberapa ciri baharu yang sangat berguna, salah satunya adalah keupayaan penghalaan yang lebih berkuasa.

Terdapat beberapa perbezaan antara fungsi penghalaan Vue3 dan Vue2, jadi kita perlu menyemak penghalaan Vue2 sebelum mempelajari fungsi penghalaan Vue3.

Penghalaan dalam Vue2 dilaksanakan dengan menggunakan Penghala Vue. Mula-mula, kita perlu memasang Penghala Vue dalam projek dan kemudian mengkonfigurasinya dalam contoh Vue. Untuk sistem penghalaan mudah, kami hanya perlu menentukan setiap laluan dan komponennya yang sepadan:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

Dalam kod di atas, kami mencipta tika Vue Router yang mengandungi dua laluan: '/' dan '/about'. Apabila pengguna melawati URL ini, Penghala Vue akan memaparkan komponen yang sepadan.

Perubahan utama dalam penghalaan dalam Vue3 adalah untuk memudahkan penggunaan fungsi penghalaan dengan menggunakan API baharu. Seterusnya, kami akan memperkenalkan fungsi penghalaan dalam Vue3 secara terperinci.

Buat Laluan Vue3

Pertama, kita perlu memasang Penghala Vue 4:

npm install vue-router@4

Kemudian, kita perlu mengimport Penghala Vue dalam aplikasi Vue dan mencipta contoh Penghala Vue :

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

Perhatikan bahawa tidak seperti penghalaan Vue2, kami kini menggunakan fungsi createRouter() untuk mencipta laluan dan bukannya Router() baharu.

Perubahan utama dalam penghalaan dalam Vue3 ialah fungsi penghalaan menggunakan pendekatan yang lebih deklaratif. Kami menggunakan fungsi createWebHistory() untuk menentukan penggunaan mod sejarah HTML5. Ini adalah teknologi yang agak baharu yang membolehkan kami mengemas kini URL halaman dengan lebih selamat tanpa memuatkan semula keseluruhan halaman.

Tentukan laluan

Cara untuk menentukan laluan adalah sama seperti Vue2. Kita boleh menentukan laluan menggunakan tatasusunan laluan. Setiap laluan terdiri daripada laluan dan komponen yang sepadan.

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

Parameter Laluan

Menggunakan parameter laluan, kita boleh menjadikan URL mempunyai nilai berubah. Sebagai contoh, kita boleh mengkonfigurasi laluan dan URL berikut:

const routes = [
  { path: '/user/:id', component: User }
]

Ini akan menjadikan :id bahagian URL sebagai parameter yang boleh menerima sebarang nilai rentetan, contohnya:

/user/1
/user/abc
/user/123abc

Kita boleh Gunakan $route.params dalam komponen untuk mengakses parameter penghalaan. Contohnya:

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id)
  }
}

Ini akan mengeluarkan parameter laluan setiap kali komponen dibuat.

Laluan Dinamakan

Kita boleh menamakan laluan apabila mentakrifkannya. Ini berguna untuk kaedah navigasi laluan tertentu, contohnya:

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

mentakrifkan laluan bernama, yang boleh kita akses melalui atribut $name.

router.push({ name: 'user', params: { id: 123 }})

Ini akan melompat ke komponen Pengguna dengan id parameter.

Navigasi Laluan

Kita boleh menggunakan kaedah berikut untuk menavigasi ke laluan lain:

// 带路径的导航
router.push('/about')

// 带命名的导航
router.push({ name: 'user', params: { id: 123 }})

// 重定向到另一个路由
router.replace('/about')

Apabila kita menggunakan penghalaan dalam komponen, kita boleh mengakses laluan semasa menggunakan $ maklumat objek laluan.

export default {
  name: 'About',
  created() {
    console.log(this.$route.path)
  }
}

Pengawal Laluan

Pengawal Laluan ialah mekanisme untuk menyemak navigasi, membolehkan kami melaksanakan kod sebelum atau selepas memintas semua laluan. Dalam Vue3, kami boleh menggunakan pengawal laluan berikut:

const router = createRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在此处添加路由守卫代码
  next()
})

Dalam sebelumSetiap pengawal, kami boleh menyemak sama ada pengguna telah log masuk atau membuat pengguna melengkapkan tindakan yang diperlukan untuk meneruskan navigasi.

Ringkasan

Vue3 mempunyai beberapa peningkatan besar dalam penghalaan, menjadikannya lebih mudah untuk digunakan berbanding Vue2. Ia memerlukan pendekatan yang lebih deklaratif, menjadikannya lebih mudah untuk menentukan dan menggunakan laluan. Selain itu, Vue3 juga memperkenalkan mod sejarah HTML5, yang menjadikan penghalaan lebih selamat dan boleh digunakan.

Menggunakan fungsi penghalaan Vue3 boleh membantu anda mencipta aplikasi SPA anda sendiri, dan anda boleh melompat dan menavigasi dengan mudah.

Atas ialah kandungan terperinci Fungsi penghalaan dalam Vue3: melaksanakan lompatan penghalaan untuk aplikasi SPA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!