Artikel yang memperkenalkan langkah-langkah untuk menggunakan Penghala Vue

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak aplikasi kini mula mengguna pakai kaedah pembangunan aplikasi halaman tunggal (Single Page Application, SPA). Sebagai salah satu alat penting untuk pembangunan bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja pilihan untuk lebih ramai pembangun. Dan apabila kami menggunakan Vue.js untuk membina aplikasi satu halaman, Penghala Vue akan wujud.

Vue Router ialah pengurus penghalaan rasmi Vue.js. Ia membolehkan kami mentakrifkan peraturan penghalaan aplikasi melalui konfigurasi mudah dan memetakan peraturan ini kepada komponen untuk mencapai kesan lompat halaman dalam aplikasi satu halaman. Dalam artikel ini, kami akan memperkenalkan langkah-langkah untuk menggunakan Penghala Vue.

Langkah 1: Pasang

Untuk menggunakan Penghala Vue, anda perlu memasangnya dahulu dalam projek. Anda boleh memasangnya melalui npm atau benang:

npm install vue-router --save

atau

yarn add vue-router

Langkah 2: Buat contoh penghalaan

Bahagian teras Penghala Vue ialah Buat a contoh penghalaan. Kami biasanya mencipta kejadian ini dalam fail konfigurasi penghalaan router.js (atau nama lain). Pertama, kita perlu memperkenalkan Penghala Vue dan Vue:

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

Kemudian, kita perlu mentakrifkan peraturan penghalaan:

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

di mana laluan ialah tatasusunan yang mengandungi peraturan penghalaan. Setiap peraturan penghalaan ialah objek yang mengandungi dua atribut: laluan dan komponen. Antaranya, laluan mewakili laluan URL dan komponen ialah komponen yang sepadan dengan laluan.

Akhir sekali, kita perlu mencipta tika Vue Router dan lulus peraturan laluan yang kita takrifkan ke dalamnya:

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

Apabila mencipta tika, kita boleh mengkonfigurasi beberapa sifat, seperti mod dan laluan, dsb., yang akan digunakan untuk menentukan parameter berkaitan penghalaan.

Langkah 3: Lekapkan contoh penghalaan ke tika akar

Kami akan menggunakan tika penghalaan (objek Vue Router) dalam tika akar, jadi kita perlu melekapkan tika itu ke tika akar tengah. Contohnya:

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

Di sini kami menghantar tika penghalaan (iaitu penghala) kepada tika akar Vue kami dan menjadikan komponen akar (iaitu Apl) ke nod #app aplikasi.

Langkah 4: Gunakan komponen berkaitan penghalaan

Apabila kami telah mencipta tika Vue Router dan memasangnya pada tika Vue akar, kami kemudian boleh menambah penghalaan antara komponen Vue Menjalankan navigasi laluan.

Dalam Penghala Vue, terdapat dua komponen penting: paparan penghala dan pautan penghala. Router-view digunakan untuk memaparkan kandungan khusus komponen penghalaan, manakala router-link ialah pautan untuk navigasi antara laluan yang berbeza.

Sebagai contoh, dalam komponen akar aplikasi kami, kami boleh menggunakan paparan penghala untuk memaparkan komponen yang sepadan dengan laluan yang berbeza:

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

Di sini, kami menciptanya melalui teg pautan penghala Beberapa pautan penghalaan. Apabila pautan penghalaan diklik, Penghala Vue secara automatik mengemas kini URL dan menjadikan komponen penghalaan ke dalam paparan penghala.

Langkah 5: Gunakan fungsi cangkuk penghalaan

Penghala Vue juga menyediakan beberapa fungsi cangkuk (pengadang penghalaan) untuk mengendalikan logik dalam proses navigasi. Cangkuk penghalaan ini boleh digunakan secara global atau setiap laluan.

Sebagai contoh, dalam fungsi cangkuk penghalaan global beforeEach, kami boleh melaksanakan logik pengesahan log masuk pengguna:

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.getters.isAuthenticated) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

Dalam kod di atas, kami menggunakan cangkuk penghalaan beforeEach untuk menyemak sama ada pengguna disahkan lulus. Jika pengguna telah disahkan, teruskan navigasi jika tidak, ubah hala pengguna ke halaman log masuk.

Selain cangkuk penghalaan beforeSetiap, Penghala Vue juga menyediakan beberapa fungsi cangkuk lain yang digunakan dalam proses navigasi penghalaan. Contohnya, beforeRouteEnter digunakan untuk mendapatkan objek contoh komponen sebelum memasuki laluan baharu. beforeRouteUpdate digunakan untuk mendapatkan objek contoh komponen apabila komponen semasa digunakan semula. BeforeRouteLeave digunakan untuk mendapatkan objek contoh apabila navigasi meninggalkan komponen semasa.

Di atas adalah langkah-langkah untuk menggunakan Penghala Vue. Penghala Vue menyediakan set pilihan konfigurasi dan fungsi cangkuk penghalaan yang sangat kaya, yang boleh membantu kami memudahkan proses pembangunan dan meningkatkan prestasi aplikasi dan pengalaman pengguna.

Atas ialah kandungan terperinci Artikel yang memperkenalkan langkah-langkah untuk menggunakan Penghala Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!