Tutorial pengenalan pembangunan VUE3: menggunakan penghalaan bahagian hadapan Vue.js

Vue.js ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini Ia digunakan dalam pelbagai projek bahagian hadapan kerana kesederhanaan, kemudahan penggunaan, kecekapan dan kelajuannya. Terutama selepas keluaran versi VUE3, prinsip dan reka bentuknya menjadi lebih jelas, dan prestasinya juga telah dipertingkatkan dengan banyak. Jika anda mencari cara yang cepat dan mudah untuk membangunkan tapak web atau aplikasi bahagian hadapan moden, maka Vue.js sangat berbaloi untuk dipelajari dan dikuasai. Artikel ini akan memperkenalkan tutorial pengenalan untuk pembangunan VUE3, memfokuskan pada cara menggunakan penghalaan bahagian hadapan Vue.js.

Apakah peranan penghalaan bahagian hadapan Vue.js?

Dalam aplikasi satu halaman, penukaran halaman dicapai melalui penghalaan bahagian hadapan. Penghalaan bahagian hadapan bermakna bahawa dalam aplikasi web, alamat URL kekal tidak berubah dan kandungan halaman ditukar melalui JavaScript untuk mencapai pemuatan tak segerak dan tiada pertukaran segar semula. Ia mengaitkan URL yang berbeza dengan komponen atau templat halaman yang berbeza, membentuk sistem penghalaan bahagian hadapan yang lengkap. Dalam Vue.js, kita boleh melaksanakan fungsi penghalaan bahagian hadapan melalui pemalam vue-router.

Pengenalan kepada vue-router

vue-router ialah pemalam penghalaan yang disediakan secara rasmi oleh Vue.js, yang digunakan untuk melaksanakan fungsi penghalaan bahagian hadapan bagi aplikasi satu halaman. Ia disepadukan rapat dengan Vue.js, menjadikannya mudah untuk membangunkan aplikasi satu halaman menggunakan Vue.js. Ia menyediakan pelbagai mod penghalaan dan menyokong fungsi yang kaya seperti penghalaan dinamik, penghalaan bersarang, penghalaan bernama, dsb. Dan vue-router juga menyokong pemuatan malas laluan, yang meningkatkan prestasi aplikasi.

Pasang vue-router

Sebelum anda mula menggunakan vue-router, anda perlu memasang pemalam vue-router. Ia boleh dipasang melalui arahan npm:

npm install vue-router

Tentukan Penghala Vue.js

Sebelum menggunakan vue-router, anda perlu menentukan Penghala. Penghala ialah salah satu komponen teras vue-router Ia bertanggungjawab untuk menghala dan memadankan semua permintaan URL dan memberikan komponen yang dipadankan ke kawasan yang ditentukan.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

Dalam kod di atas, kami mula-mula memperkenalkan Vue dan VueRouter, dan memasang VueRouter ke dalam Vue melalui kaedah Vue.use(). Kemudian dua peraturan penghalaan ditakrifkan, masing-masing sepadan dengan halaman utama dan tentang halaman Peraturan ini ditakrifkan melalui laluan, nama dan atribut komponen. Akhir sekali, kami menyerahkan peraturan ini kepada contoh VueRouter baharu dan mengeksport objek penghala.

Gunakan penghalaan bahagian hadapan Vue.js

Selepas mentakrifkan Penghala, kita perlu menggunakannya dalam komponen vue. Komponen Vue boleh digunakan untuk memaparkan kawasan yang berbeza pada halaman Kami boleh menggunakan paparan penghala komponen terbina dalam Vue.js untuk memaparkan komponen yang dipadankan.

<template>
  <div class="wrapper">
    <h1>{{ msg }}</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to my VUE3 Web App!'
    }
  }
}
</script>

pautan penghala ialah komponen terbina dalam Vue.js, digunakan untuk menjana pautan dan mengaitkan pautan dengan penghala. Apabila pengguna mengklik pada pautan, Penghala secara automatik memaparkan komponen Vue yang sepadan dengan pautan.

Ringkasan

Artikel ini memperkenalkan tutorial pengenalan untuk pembangunan VUE3, memfokuskan pada cara menggunakan penghalaan bahagian hadapan Vue.js. Vue.js ialah rangka kerja JavaScript yang hebat terutamanya sesuai untuk membangunkan satu halaman dan aplikasi mudah alih. Modul penghalaan vue-router Vue.js mempunyai banyak fungsi yang sangat baik yang boleh membantu kami membangunkan fungsi penghalaan dengan mudah. Saya berharap pengenalan dalam artikel ini dapat membantu pemula menguasai fungsi penghalaan Vue.js dengan lebih baik.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: menggunakan penghalaan bahagian hadapan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!