Kemajuan Vue3 berbanding Vue2: pengurus penghalaan yang lebih maju

Tajuk: Kemajuan Vue3 berbanding Vue2: Pengurus penghalaan yang lebih maju

Pengenalan:
Dengan pembangunan berterusan teknologi bahagian hadapan, rangka kerja Vue secara beransur-ansur menjadi salah satu rangka kerja bahagian hadapan yang paling popular sejak beberapa tahun kebelakangan ini. Sebagai versi Vue2 yang dipertingkatkan, Vue3 membawa banyak ciri dan penambahbaikan baharu, termasuk pengurus penghalaan yang lebih maju. Dalam artikel ini, kami akan meneroka kemajuan dalam pengurusan laluan Vue3 berbanding Vue2 dan menunjukkannya melalui contoh kod.

1. Pengurus penghalaan Vue2
Dalam Vue2, kami biasanya menggunakan perpustakaan vue-router untuk melaksanakan pengurusan penghalaan. Pustaka ini menyediakan satu siri API untuk menentukan laluan, mengendalikan navigasi laluan dan memaparkan komponen laluan. Berikut ialah contoh mudah menggunakan vue-router:

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- main.js -->
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dalam contoh di atas, kami menggunakan VueRouter untuk mencipta tika penghalaan dan menghantarnya kepada tika Vue. Dengan mentakrifkan tatasusunan laluan, kami boleh menentukan komponen yang sepadan di bawah laluan berbeza untuk bertukar antara halaman.

Walau bagaimanapun, pengurus laluan Vue2 mempunyai beberapa had dalam beberapa aspek. Sebagai contoh, apabila kita perlu berurusan dengan penghalaan dinamik atau penghalaan bersarang, kod menjadi kompleks dan sukar untuk dikekalkan. Selain itu, pengurus penghalaan Vue2 tidak cukup mesra untuk komponen tak segerak.

2. Pengurus penghalaan Vue3
Vue3 memperkenalkan perpustakaan pengurus penghalaan serba baharu, iaitu vue-router@next. Berbanding dengan pengurus penghalaan Vue2, Vue3 membawa beberapa penambahbaikan dan kemas kini penting, menjadikan pengurusan penghalaan lebih maju dan fleksibel. Berikut ialah contoh penggunaan vue-router@next:

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- main.js -->
import { createApp } from '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 }
  ]
})

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

Dalam contoh di atas, kami menggunakan fungsi createRouter untuk mencipta tika penghalaan dan menggunakan mod sejarah penyemak imbas untuk navigasi laluan melalui fungsi createWebHistory. Dengan mentakrifkan tatasusunan laluan, kita boleh menentukan komponen yang sepadan di bawah laluan yang berbeza seperti Vue2.

Walau bagaimanapun, pengurus laluan Vue3 menyediakan lebih banyak kemudahan dalam mengendalikan penghalaan dinamik, penghalaan bersarang dan komponen tak segerak. Berikut ialah contoh penggunaan vue-router@next untuk mengendalikan penghalaan dinamik:

<!-- App.vue -->
<template>
  <div>
    <router-view :key=" $route.fullPath "></router-view>
  </div>
</template>

<!-- main.js -->
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import User from './components/User.vue'

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

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

Dalam contoh di atas, kami telah menentukan laluan dinamik, iaitu '/user/:id'. Dengan menggunakan objek $route dalam komponen, kita boleh mendapatkan parameter laluan dinamik dengan mudah dan kemudian memuatkan kandungan yang sepadan berdasarkan parameter.

Selain itu, pengurus laluan Vue3 juga menyediakan sokongan komponen tak segerak yang lebih baik. Kami boleh menggunakan component: () => import('./components/About.vue') untuk memuatkan komponen atas permintaan dan meningkatkan prestasi pemuatan halaman.

Kesimpulan:
Vue3 telah membuat banyak kemajuan dan peningkatan dalam pengurus penghalaan berbanding Vue2, menjadikan pengurusan penghalaan lebih maju, fleksibel dan mesra. Kami boleh melaksanakan fungsi seperti penghalaan dinamik, penghalaan bersarang dan komponen tak segerak melalui perpustakaan vue-router@next baharu. Ini memudahkan untuk membina aplikasi bahagian hadapan yang kompleks.

Rujukan:

• Vue Router dokumentasi rasmi: https://router.vuejs.org/
• Vue Router@next dokumentasi rasmi: https://next.router.vuejs.org/

Atas ialah kandungan terperinci Kemajuan Vue3 berbanding Vue2: pengurus penghalaan yang lebih maju. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!