Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Penghala Vue untuk pengurusan penghalaan

Vue3+TS+Vite Petua Pembangunan: Cara menggunakan Vue Router untuk pengurusan penghalaan

Dalam beberapa tahun kebelakangan ini, rangka kerja Vue telah menjadi lebih dan lebih popular dalam bidang pembangunan hadapan Lebih digemari oleh pemaju. Dalam ekosistem Vue, Vue Router, sebagai alat pengurusan penghalaan moden, boleh membantu kami membina aplikasi satu halaman dengan pengalaman pengguna yang baik. Artikel ini akan berkongsi kemahiran pembangunan menggunakan Penghala Vue dengan Vue3 dan TypeScript untuk pengurusan penghalaan.

1. Pasang dan mulakan Vue Router

Pertama, kita perlu memasang Vue Router menggunakan arahan npm atau yarn. Buka terminal dan laksanakan arahan berikut:

npm install vue-router@next

Kemudian, dalam fail kemasukan (main.ts atau main.js) projek Vue3, kita perlu memperkenalkan Penghala Vue dan mengaitkannya dengan Aplikasi Vue. Kod sampel adalah seperti berikut:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
  // 其他路由配置
]

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

createApp(App)
  .use(router)
  .mount('#app')

Dalam kod sampel di atas, kami mula-mula mencipta tika Vue Router melalui fungsi createRouter dan mengkonfigurasi mod sejarah penghalaan dan jadual penghalaan. Kemudian, tika aplikasi Vue dicipta melalui fungsi createApp, dan tika Vue Router yang dibuat didaftarkan ke dalam aplikasi Vue melalui kaedah penggunaan.

2. Tentukan penghalaan dan komponen

Dalam langkah sebelumnya, kami telah mengkonfigurasi jadual penghalaan asas. Dalam contoh ini, kami hanya menambah laluan bernama Home dan menetapkan komponen yang sepadan dengan komponen Home. Seterusnya, kita perlu mencipta komponen ini.

Dalam direktori src/views, buat fail bernama Home.vue dan edit kandungan fail seperti berikut:

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "Home"
})
</script>

<style scoped>
</style>

Dalam kod sampel ini, kami menggunakan ciri Vue New - API Komposisi. Tentukan komponen melalui fungsi defineComponent dan eksport komponen ini. Dalam komponen ini, kami hanya memberikan elemen div yang mengandungi tajuk "Rumah".

3. Navigasi dan lompatan laluan

Berdasarkan dua langkah pertama, kami telah berjaya mencipta aplikasi Asas Penghala Vue. Seterusnya, kami akan memperkenalkan beberapa kaedah dan teknik berkaitan untuk navigasi dan lompatan penghalaan yang disediakan oleh Vue Router.

1. Gunakan komponen untuk navigasi

Vue Router menyediakan komponen yang mudah fungsi navigasi. Dalam templat, kita hanya perlu menggunakan dan menetapkan atribut untuk menentukan laluan penghalaan yang perlu dilompat.

Kod sampel adalah seperti berikut:

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

Dalam contoh ini, kami menambahkan komponen akan melompat ke laluan "/about".

2. Gunakan kaedah penghala.push() untuk navigasi program

Selain menggunakan komponen untuk navigasi, Vue Router juga menyediakan kaedah untuk navigasi program. Kita boleh menggunakan kaedah router.push() dalam skrip komponen untuk melakukan lompatan penghalaan.

Kod sampel adalah seperti berikut:

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: "Home",
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
})

Dalam contoh ini, kami mentakrifkan kaedah goToAbout, gunakan fungsi useRouter di dalam kaedah untuk mendapatkan contoh Vue Router semasa, dan lulus router.push ('/about') untuk melakukan lompatan penghalaan.

4. Parameter penghalaan dan penghalaan dinamik

Penghala Vue juga menyokong parameter penghalaan dan penghalaan dinamik. Dengan mengkonfigurasi ruang letak dalam laluan penghalaan, kita boleh mencipta laluan penghalaan yang mengandungi parameter dinamik dan mendapatkan nilai parameter penghalaan melalui objek $route.params.

Kod sampel adalah seperti berikut:

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
  // 其他路由配置
]

const User = defineComponent({
  name: "User",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    console.log(this.id) // 输出路由参数id的值
  }
})

Dalam contoh di atas, kami mentakrifkan laluan penghalaan /pengguna/:id yang mengandungi parameter dinamik, dan menerima serta mengesahkannya melalui atribut props Nilai parameter penghalaan. Dalam fungsi cangkuk kitaran hayat yang dicipta bagi komponen Pengguna, kita boleh mengeluarkan nilai id parameter penghalaan melalui console.log(this.id).

5. Pengawal laluan

Dalam projek sebenar, kami selalunya perlu melakukan beberapa pemprosesan logik tambahan sebelum lompatan laluan, seperti pengesahan log masuk pengguna, kawalan kebenaran halaman, dsb. Penghala Vue menyediakan pengawal laluan untuk memenuhi keperluan ini.

Tiga pengawal penghalaan yang biasa digunakan Penghala Vue adalah sebelumSetiap, sebelumMasuk dan sebelumKeluar. Mereka dicetuskan masing-masing sebelum laluan melompat, sebelum memasuki laluan tertentu, dan sebelum meninggalkan laluan tertentu.

Kod sampel adalah seperti berikut:

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeEnter((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeLeave((to, from, next) => {
  // 逻辑处理
  next()
})

Dalam contoh di atas, kami mendaftarkan pengawal penghalaan global melalui kaedah yang sepadan bagi objek penghala, dan melakukan pemprosesan logik tambahan dalam fungsi panggil balik. Selepas memproses logik, teruskan lompatan penghalaan dengan memanggil kaedah seterusnya().

6. Ringkasan

Sebagai bahagian penting dalam ekosistem Vue, aplikasi Vue Router dalam persekitaran pembangunan Vue3+TS+Vite telah menjadi lebih mudah dan lebih fleksibel. Artikel ini berkongsi beberapa petua utama tentang cara menggunakan Penghala Vue untuk pengurusan laluan, termasuk memasang dan memulakan Penghala Vue, menentukan laluan dan komponen, navigasi dan lompatan laluan, laluan dinamik dan parameter laluan serta pengawal laluan.

Dengan menguasai kemahiran ini, kami boleh menggunakan Penghala Vue dengan lebih baik untuk membina aplikasi satu halaman dengan pengalaman pengguna yang baik dan memainkan peranan yang lebih besar dalam pembangunan bahagian hadapan. Saya harap artikel ini dapat memberikan sedikit bantuan dan panduan kepada pembaca dalam menggunakan Penghala Vue untuk pengurusan penghalaan dalam projek Vue3+TS+Vite.

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Penghala Vue untuk pengurusan penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!