tutorial pemasangan penghala vue

Vue ialah rangka kerja pembangunan bahagian hadapan yang popular, dan Penghala Vue ialah sebahagian daripada Vue yang digunakan untuk mengurus penghalaan dalam aplikasi Vue. Penghala Vue membolehkan anda mengawal URL pelayar dan kandungan yang dipaparkan dalam aplikasi anda. Ia menyediakan pengalaman interaktif yang kaya dan keupayaan navigasi halaman untuk aplikasi Vue. Dalam artikel ini, kami akan menerangkan cara memasang dan menggunakan Penghala Vue.

1. Membuat projek Vue

Mula-mula, anda perlu memasang Vue CLI dan mencipta projek Vue baharu. Masukkan arahan berikut pada baris arahan:

npm install -g @vue/cli
vue create my-project

Arahan di atas akan memasang Vue CLI dan menggunakannya untuk mencipta projek Vue bernama "my-project". Masuk ke projek baharu anda dan masukkan arahan berikut pada baris arahan untuk memulakan aplikasi:

cd my-project
npm run serve

2. Pasang Vue Router

Seterusnya, kita perlu memasang Vue Router. Masukkan arahan berikut pada baris arahan untuk memasang Vue Router:

npm install vue-router --save

Arahan di atas akan memasang Vue Router melalui npm dan menambahkannya pada kebergantungan projek anda.

3. Mencipta laluan

Seterusnya, kami akan mencipta beberapa laluan dan melihat komponen. Buat fail bernama "router.js" dalam direktori SRC. Dalam fail ini, kami akan mencipta contoh Penghala Vue baharu dan mengeksportnya. Berikut ialah contoh mudah:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

Kod di atas mencipta laluan bernama "home" yang menghala ke komponen bernama "Home". Untuk menggunakan Penghala Vue, anda perlu mengimport laluan dalam titik masuk aplikasi anda. Buka fail "main.js" dan tambahkan kod berikut:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

Kod di atas mendayakan penghalaan dengan mengimport fail "router.js" dan memasukkannya ke dalam contoh root Vue.

4. Mencipta komponen paparan

Seterusnya, kita perlu mencipta beberapa komponen paparan untuk memaparkan laluan yang berbeza. Cipta fail bernama "Home.vue" dalam folder "src/views". Dalam fail ini, tambahkan kod berikut:

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

Kod di atas mentakrifkan komponen "Rumah" ringkas yang hanya mempunyai tajuk dan tiada interaksi atau navigasi. Anda boleh menambah lebih banyak komponen dan membuat laluan berbeza untuk mereka.

5. Tambah navigasi

Untuk membolehkan pengguna menavigasi ke laluan dan komponen yang berbeza, kami perlu menambahkan beberapa elemen navigasi pada aplikasi kami. Tambahkan kod berikut dalam fail "App.vue":

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Kod di atas menambah dua elemen pautan, satu menunjuk ke laluan "Home" dan satu lagi menunjuk ke laluan "About". Ia juga mengandungi elemen <router-view> yang akan memaparkan komponen berbeza berdasarkan URL semasa.

6. Jalankan aplikasi

Kini anda boleh menjalankan aplikasi untuk melihat sama ada penghalaan anda berfungsi dengan betul. Masukkan arahan berikut pada baris arahan:

npm run serve

Ini akan melancarkan aplikasi anda dalam penyemak imbas. Anda boleh menggunakan elemen navigasi untuk menavigasi ke laluan dan komponen yang berbeza dan melihat cara URL menggambarkan keadaan navigasi semasa.

Kesimpulan

Penghala Vue ialah alat yang sangat berguna yang boleh membantu anda membina aplikasi Vue interaktif dengan navigasi yang kompleks. Untuk menggunakan Penghala Vue, anda perlu menambah komponen pada aplikasi anda dan menyediakan penghalaan dan navigasi. Saya harap artikel ini membantu dan saya mengucapkan selamat maju jaya kepada pembangunan Vue!

Atas ialah kandungan terperinci tutorial pemasangan penghala vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!