Vue-Router: Bagaimana untuk menggunakan laluan bernama dalam aplikasi Vue?

Vue-Router: Bagaimana untuk menggunakan laluan bernama dalam aplikasi Vue?

Sebagai rangka kerja JavaScript yang popular, senario aplikasi utama Vue ialah SPA bebas (aplikasi halaman tunggal). Apabila membangunkan aplikasi sedemikian, penghalaan adalah komponen yang sangat penting, dan vue-router ialah pemalam untuk fungsi penghalaan yang disediakan secara rasmi oleh Vue. Ia boleh membantu pembangun dengan mudah melompat antara halaman dan mengurus status. Dalam artikel ini, kami akan memperkenalkan cara menggunakan laluan bernama dalam aplikasi Vue.

1. Apakah yang dinamakan penghalaan?

Penghalaan merujuk kepada proses di mana klien meminta sumber yang berbeza daripada pelayan berdasarkan permintaan URL pengguna, dan kemudian pelayan mengembalikan halaman yang berbeza ke penyemak imbas bahagian hadapan untuk paparan. Dalam aplikasi Vue, laluan boleh ditakrifkan sebagai sumber berbeza bagi tapak web dinamik seperti berikut:

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

Dalam kod di atas, kami mentakrifkan dua laluan: satu ialah laluan yang menghala ke sumber '/' dan satu lagi menunjuk ke '/about' Penghalaan sumber. Laluan ini boleh dirujuk dan diubah hala dengan nama laluan ('rumah' dan 'tentang').

2. Kelebihan penghalaan bernama

Penghalaan bernama membolehkan kami merujuk dan menukar laluan pada bila-bila masa dan di mana sahaja melalui pemalar. Apabila kami memfaktorkan semula, nyahpepijat atau mengekalkan kod, menggunakan nama laluan boleh mengelakkan masalah memusnahkan laluan sedia ada dengan mengubah suai laluan penghalaan. Pada masa yang sama, ia juga boleh mengurangkan gandingan dan mengelakkan kebergantungan laluan antara komponen yang berbeza, dengan itu meningkatkan kebolehselenggaraan kod.

3. Bagaimana untuk menggunakan laluan bernama dalam aplikasi Vue?

Dalam aplikasi Vue, kita boleh menggunakan laluan yang dinamakan seperti berikut.

<template>
  <div id="app">
      <router-link :to="{ name: 'home' }">Home</router-link>
      <router-link :to="{ name: 'about' }">About</router-link>
      <router-view></router-view>
  </div>
</template>

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

Dalam kod, kami mengkonfigurasi pautan laluan dengan menambah sintaks mengikat ':to'. Kita dapat melihat bahawa dalam kod di atas, dua hiperpautan dan komponen paparan penghalaan ditakrifkan melalui komponen 'pautan-penghala'. ':to' dalam hiperpautan mengikat nama laluan dan memetakannya kepada komponen penghalaan yang ditentukan. Ini bukan sahaja membolehkan pengguna melompat ke halaman melalui nama laluan, tetapi juga mengelakkan masalah memusnahkan laluan sedia ada dengan mengubah suai laluan penghalaan.

4. Ringkasan

Dalam aplikasi Vue, menggunakan laluan yang dinamakan boleh mengelakkan masalah memusnahkan laluan sedia ada dengan mengubah suai laluan penghalaan, dan juga boleh mempopularkan dan mengurangkan gandingan, menjadikan kod lebih mudah untuk diselenggara. Dalam aplikasi Vue, adalah penting untuk menggunakan laluan yang dinamakan. Di atas ialah pengenalan dan contoh penggunaan laluan bernama dalam aplikasi Vue.

Atas ialah kandungan terperinci Vue-Router: Bagaimana untuk menggunakan laluan bernama dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!