Cara menggunakan fungsi penghalaan dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript popular yang menggunakan beberapa teknologi dan konsep hadapan, termasuk komponen, pengurusan keadaan dan fungsi penghalaan. Untuk aplikasi SPA (Single Page Application), penghalaan adalah bahagian yang sangat penting. Penghala Vue menyediakan cara mudah untuk mengurus penghalaan aplikasi, yang membolehkan kami menentukan laluan dan komponennya yang sepadan dalam aplikasi. Artikel ini akan memperkenalkan cara menggunakan fungsi penghalaan dalam dokumen Vue.

Pasang Vue Router

Sebelum kita mula menggunakan Vue Router, kita perlu memasangnya. Pasang Penghala Vue melalui npm:

$ npm install vue-router

Struktur asas Penghala Vue

Dalam Vue, laluan ialah surat-menyurat antara alamat URL dan komponen. Berikut ialah struktur asas Penghala Vue:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Menggunakan pembina VueRouter yang disediakan secara rasmi, kita boleh mencipta contoh penghalaan baharu. Dalam contoh ini, kami mentakrifkan corak penghalaan dan peraturan penghalaan. Terdapat dua mod penghalaan, satu mod cincang dan satu lagi mod sejarah Di sini kita memilih mod sejarah. Peraturan laluan dibahagikan kepada berbilang laluan, setiap laluan mempunyai laluan (laluan), nama (nama) dan komponen yang sepadan (komponen).

Kaedah pemaparan penghalaan

Untuk menggunakan penghalaan dalam aplikasi Vue, kita perlu terlebih dahulu menyediakan komponen paparan penghala untuk mengehoskan bahagian penghalaan yang sepadan. Berdasarkan padanan laluan antara lokasi komponen dan peraturan penghalaan, Vue akan secara automatik menjadikan komponen yang betul ke lokasi yang sepadan. Seperti yang ditunjukkan di bawah:

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

Dalam contoh ini, komponen penghalaan akan dipaparkan di dalam komponen paparan penghala.

Menggunakan parameter dinamik

Kadangkala, kita perlu menggunakan parameter dinamik dalam penghalaan. Sebagai contoh, dalam aplikasi blog, kita perlu mendapatkan kandungan artikel mengikut ID artikel. Di bahagian belakang, URL akan mempunyai parameter ID artikel dinamik, seperti "/blog/123", dengan 123 ialah ID artikel. Dalam Vue, kita boleh menggunakan peraturan penghalaan untuk menetapkan parameter dinamik:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: Blog
    }
  ]
})

Dalam contoh ini, kami mentakrifkan peraturan penghalaan dengan parameter dinamik. Parameter bermula dengan titik bertindih, seperti ":id". Apabila memadankan "/blog/123", "123" akan menjadi parameter dinamik. Pada masa yang sama, ia juga sangat mudah untuk menggunakan parameter ini dalam komponen:

export default {
  data () {
    return {
      postId: null
    }
  },
  created () {
    this.postId = this.$route.params.id
    // 根据post id获取文章
  }
}

Dalam contoh komponen, parameter boleh diperolehi melalui ini.$route.params.id.

Navigasi Programatik

Pada permulaan bab, kami mencipta tika Vue Router. Menggunakan contoh ini, kita boleh melaksanakan pensuisan penghalaan secara pemrograman. Penghala Vue menyediakan dua kaedah untuk melaksanakan navigasi program: $router.push() dan $router.replace().

Dalam contoh di atas, terdapat dua butang penghalaan, setiap satu disambungkan ke laluan yang berbeza. Dengan menghalakan acara klik butang, kami boleh menggunakan $router.push() dalam JavaScript asas untuk menavigasi ke laluan tertentu:

<template>
  <div id="app">
    <header>
      <button @click="$router.push('/')">Home</button>
      <button @click="$router.push('/about')">About</button>
    </header>
    <router-view></router-view>
  </div>
</template>

Pengawal Navigasi

Apabila penghalaan ditukar, kami mungkin Beberapa operasi diperlukan, seperti kebenaran, memuatkan data, dsb. Penghala Vue menyediakan Pengawal Navigasi untuk menyelesaikan masalah ini. Pengawal Navigasi ialah sekumpulan fungsi yang boleh dilaksanakan apabila laluan dilayari, seperti sebelum, selepas, atau semasa melompat ke laluan. Penghala Vue menyediakan tiga jenis Pengawal Navigasi: Pengawal global, Pengawal komponen dan Pengawal penghalaan.

Global Guard

Global Guard ialah Pengawal yang ditakrifkan dalam keseluruhan aplikasi dan berkuat kuasa pada semua halaman. Vue Router menyediakan beberapa pengawal global, termasuk:

• beforeEach(to, from, next): dilaksanakan sebelum memasuki laluan.
• afterEach(to, from): Dilaksanakan selepas laluan masuk.

Pengawal Komponen

Pengawal Komponen ialah Pengawal yang ditakrifkan dalam komponen dan dilaksanakan apabila memasuki komponen. Penghala Vue menyediakan Pengawal komponen berikut:

• beforeRouteEnter(ke, dari, seterusnya): Dilaksanakan sebelum memasuki komponen, contoh komponen tidak boleh diakses.
• beforeRouteUpdate(to, from, next): Dilaksanakan apabila laluan dikemas kini dan boleh mengakses contoh komponen.
• beforeRouteLeave(to, from, next): Dilaksanakan apabila meninggalkan komponen, anda boleh mengakses contoh komponen.

Pengawal Penghalaan

Pengawal Penghalaan ialah Pengawal yang ditakrifkan apabila laluan ditakrifkan dan berkuat kuasa dalam laluan tertentu. Vue Router menyediakan pengawal penghalaan berikut:

• beforeEnter(to, from, next): Dilaksanakan sebelum memasuki laluan, ia hanya berkuat kuasa pada laluan ini.
• beforeResolve(to, from, next): Dilaksanakan apabila laluan masuk dan boleh mengakses contoh komponen.

Ringkasan

Penghalaan ialah bahagian yang sangat penting dalam aplikasi Vue, dan Penghala Vue memberikan kami cara mudah untuk mengurus penghalaan. Dalam artikel ini, kami memperkenalkan struktur asas, kaedah pemaparan, parameter dinamik, navigasi program dan Pengawal Navigasi Penghala Vue. Vue Router ialah perpustakaan penghalaan yang berkuasa dan mudah digunakan Jika anda ingin melanjutkan aplikasi Vue anda, pastikan anda merujuk kepada API yang disediakan dalam dokumen ini.

Atas ialah kandungan terperinci Cara menggunakan fungsi penghalaan dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!