Vue.js untuk Pemula Panduan Lengkap untuk Penghalaan dengan Penghala Vue

Memahami Penghalaan dalam Vue.js

Penghalaan ialah ciri penting dalam pembangunan aplikasi web. Dalam Vue.js, kami boleh menggunakan Penghala Vue untuk mengurus navigasi antara halaman dengan mudah. Dalam siaran ini, kami akan meneroka cara menyediakan penghalaan dalam aplikasi Vue.js.

Apakah Penghala Vue?

Vue Router ialah perpustakaan rasmi untuk mengurus penghalaan dalam aplikasi Vue.js. Dengan Vue Router, kami boleh mencipta aplikasi satu halaman (SPA) yang membolehkan navigasi lancar tanpa memuatkan semula halaman.

Memasang Penghala Vue

Pertama, kita perlu memasang Penghala Vue. Jika anda menggunakan Vue CLI, anda boleh memilih untuk memasangnya semasa membuat projek baharu. Jika tidak, anda boleh memasangnya dengan arahan berikut:

npm install vue-router

Menyediakan Penghala Vue

Selepas pemasangan, kita perlu mengkonfigurasi Penghala Vue. Berikut ialah langkah asas untuk menyediakannya:

• Buat Fail Penghala Buat fail baharu bernama router.js di dalam folder src: import Vue daripada 'vue'; import Penghala daripada 'vue-router'; import Laman Utama daripada './views/Home.vue'; import Perihal daripada './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• Sepadukan Penghala ke dalam Aplikasi Seterusnya, kami perlu menyepadukan penghala ke dalam contoh Vue kami. Edit fail main.js seperti berikut:

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

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• Menggunakan Pautan Penghala Untuk menavigasi antara halaman, kami menggunakan komponen. Berikut ialah contoh cara menggunakannya dalam fail App.vue:

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Place to display the matched component -->
  </div>
</template>

• Mencipta Halaman Baharu Sekarang, mari kita buat dua komponen yang akan kita gunakan: Home.vue dan About.vue.

Home.vue:

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

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

Mengenai.vue:

<template>
  <div>
    <h1>This is the About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

Kini anda boleh menjalankan aplikasi anda dengan arahan:

npm run serve

Buka penyemak imbas anda dan pergi ke http://localhost:8080. Cuba klik pada pautan Laman Utama dan Perihal untuk melihat cara penghalaan berfungsi!

Kesimpulan

Dalam siaran ini, kami telah membincangkan asas penghalaan dalam Vue.js menggunakan Penghala Vue. Dengan keupayaan penghalaan ini, anda boleh membina aplikasi yang lebih interaktif dan mesra pengguna. Dalam siaran seterusnya, kita boleh menyelidiki ciri yang lebih maju bagi Penghala Vue, seperti parameter laluan dan laluan bersarang.

Saya harap anda mendapati siaran ini membantu! Sila tinggalkan komen jika anda mempunyai sebarang pertanyaan.

Atas ialah kandungan terperinci Vue.js untuk Pemula Panduan Lengkap untuk Penghalaan dengan Penghala Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!