Apakah arahan konfigurasi asas Penghala Vue?

Vue’s Router ialah pemalam untuk lompat halaman dan pengurusan penghalaan. Ia boleh membantu kami memuatkan komponen yang berbeza mengikut permintaan URL yang berbeza dan melaksanakan fungsi penghalaan bahagian hadapan. Apabila menggunakan Penghala Vue, anda perlu melakukan konfigurasi asas padanya. Yang berikut akan memperkenalkan arahan konfigurasi asas Router Vue secara terperinci, dan melampirkan contoh kod tertentu.

1. Pasang Vue Router
   Gunakan npm untuk memasang Vue Router, buka terminal dan laksanakan arahan berikut dalam direktori projek:

   npm install vue-router

2. Import Vue Router
   Import Vue Router menggunakan fail Vue dan fail utama. .use method Daftarkannya sebagai pemalam untuk Vue:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

3. Buat contoh penghalaan
   Buat contoh penghalaan dalam fail main.js dan konfigurasikan peraturan penghalaan:

   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 routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ]
   
   const router = new VueRouter({
     mode: 'history', // 使用HTML5的history模式，去除URL中的"#"
     routes
   })

4. Lekapkan instance penghalaan
   fail main.js, tambahkan Contoh penghalaan dipasang pada contoh Vue:

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

5. Mengkonfigurasi alur keluar penghalaan
   Dalam komponen akar Vue, gunakan teg :

   <template>
     <div>
    <router-view></router-view>
     </div>
   </template>

Melalui konfigurasi di atas, kami Ini melengkapkan konfigurasi asas Penghala Vue. Berikut ialah contoh lengkap:

Mula-mula, buat dua komponen, Home.vue dan About.vue, dalam direktori src/components.

Kandungan Home.vue adalah seperti berikut:

<template>
  <div>
    <h2 id="Welcome-to-Home-Page">Welcome to Home Page</h2>
  </div>
</template>

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

Kandungan About.vue adalah seperti berikut:

<template>
  <div>
    <h2 id="Welcome-to-About-Page">Welcome to About Page</h2>
  </div>
</template>

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

Kemudian, buat fail index.js dalam direktori src/router dengan kandungan berikut:

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 routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Akhirnya, dalam Fail src/main.js Konfigurasikan seperti berikut:

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

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

Di atas adalah arahan konfigurasi asas dan contoh kod Penghala Vue. Melalui konfigurasi ini, kami boleh melaksanakan lompatan antara halaman dan fungsi penghalaan bahagian hadapan. Saya harap artikel ini dapat membantu anda memahami dan menggunakan Penghala Vue.

Atas ialah kandungan terperinci Apakah arahan konfigurasi asas Penghala Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!