Bagaimana untuk melakukan penghalaan dalam vue

Vue.js ialah rangka kerja bahagian hadapan yang popular untuk membina aplikasi web satu halaman. Vue menyediakan banyak alat dan pemalam yang mudah, salah satunya ialah Penghala Vue untuk menguruskan penghalaan aplikasi anda. Artikel ini akan memperkenalkan cara menggunakan Penghala Vue untuk mencipta sistem penghalaan asas.

1. Pasang Vue Router

Untuk menggunakan Vue Router, anda perlu memasangnya terlebih dahulu. Anda boleh menggunakan npm atau benang untuk memasang.

Gunakan npm:

npm install vue-router 

Gunakan benang:

yarn add vue-router 

Selepas pemasangan selesai, kita perlu memperkenalkan Vue Router.

import VueRouter from 'vue-router';

2. Buat contoh Penghala Vue

Selepas memasang Penghala Vue, kita perlu mencipta tika Penghala Vue, yang akan membuat Penghala Vue dan menentukan laluan. Dalam Vue.js, komponen biasanya dibuat dan diurus menggunakan tika Vue. Sebelum membuat tika Vue Router, pastikan untuk mencipta tika Vue terlebih dahulu.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由信息定义
  ]
});

Dalam kod di atas, kami mencipta contoh penghala dan mentakrifkan maklumat penghalaan tapak web dalam pilihan laluan. Dalam Penghala Vue, maklumat penghalaan terdiri daripada satu set objek penghalaan. Setiap objek laluan mentakrifkan laluan laluan dan komponen halaman yang sepadan dengan laluan.

3. Buat jadual penghalaan

Atribut laluan yang ditakrifkan dalam tika penghala digunakan untuk menyimpan maklumat penghalaan untuk keseluruhan aplikasi. Dalam atribut ini, kami mentakrifkan peraturan penghalaan, menentukan laluan URL dan komponen paparan yang sepadan.

import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

Dalam kod di atas, kami mentakrifkan dua peraturan penghalaan: / dan /about, yang masing-masing dipetakan pada komponen HomePage dan AboutPage.

4. Daftar jadual penghalaan

Dengan memanggil kaedah instantiasi Vue Router, kami boleh mendaftarkan jadual penghalaan ke aplikasi Vue. Ini boleh dicapai dengan memanggil kaedah Vue.use() pada contoh Penghala Vue.

Vue.use(VueRouter);

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

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

Dalam kod di atas, kami mendaftarkan Penghala Vue pada tika Vue dan membuat seketika. Seterusnya, kami menghantar contoh Vue Router kepada contoh Vue root.

5. Buat pautan penghalaan

Dalam Penghala Vue, kita boleh menggunakan komponen pautan laluan (pautan penghala) untuk melaksanakan navigasi halaman. Komponen pautan penghala sebenarnya menghasilkan teg dan secara automatik mengikat maklumat penghalaan.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Dalam kod di atas, kami menggunakan dua komponen pautan penghala untuk menavigasi ke halaman utama dan halaman tentang. Teg pautan penghala hendaklah dibalut dengan elemen yang perlu dipautkan.

6. Buat paparan laluan

Vue Router menyediakan komponen yang dipanggil router-view untuk memaparkan paparan berdasarkan laluan semasa.

<router-view/>

Dalam kod di atas, kami telah menggunakan teg paparan penghala untuk memaparkan komponen padanan URL semasa di lokasi yang sesuai.

7. Mengendalikan acara laluan

Dalam Penghala Vue, kami boleh mengendalikan acara apabila navigasi laluan dicetuskan. Ini boleh dilakukan dengan mendengar acara pada contoh Penghala Vue.

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  // 在路由开始跳转前，进行路由守卫
});

router.afterEach(() => {
  // 跳转完成后
});

Dalam kod di atas, kami menggunakan kaedah beforeEach() dan afterEach() untuk mendengar acara penghalaan. Dalam kaedah beforeEach(), kami boleh melakukan pengawal penghalaan, seperti meminta log masuk pengguna atau mengesahkan kebenaran pengguna. Dalam kaedah afterEach(), kita boleh melakukan operasi selepas lompatan halaman.

Ringkasan

Artikel ini menerangkan cara menggunakan Penghala Vue untuk mencipta laluan dalam aplikasi Vue.js. Kami memasang Vue Router dan mencipta contoh Vue Router, dan menentukan jadual penghalaan. Kami juga membincangkan cara membuat pautan laluan dan paparan laluan dalam aplikasi Vue.js, dan cara mengendalikan acara laluan. Dengan menggunakan Penghala Vue, kami boleh membina aplikasi web satu halaman yang lengkap dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk melakukan penghalaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!