Cara menggunakan vue berbilang halaman

Dengan perkembangan pesat era Internet, semakin banyak laman web dan aplikasi dilaksanakan menggunakan seni bina aplikasi berbilang halaman tradisional tidak lagi mencukupi untuk memenuhi keperluan pembangunan. Dalam pelaksanaan aplikasi berbilang halaman, rangka kerja bahagian hadapan Vue secara beransur-ansur menjadi pilihan pertama untuk pembangun.

Vue ialah rangka kerja JavaScript ringan yang meningkatkan kecekapan pembangunan melalui komponenisasi Saya juga telah memperkenalkan penggunaan asas Vue dalam artikel sebelumnya. Dalam artikel ini, saya akan memperkenalkan kepada anda cara menggunakan Vue untuk melaksanakan aplikasi berbilang halaman.

1. Buat berbilang tika Vue

Dalam aplikasi berbilang halaman, setiap halaman memerlukan tika Vue bebas, jadi kami memerlukan fail JavaScript dalam setiap halaman Buat tika Vue dalam . Kita boleh menggunakan Vue pembina yang disediakan oleh Vue untuk mencipta contoh dan melekapkannya pada elemen DOM halaman.

Sebagai contoh, kami boleh mencipta tika Vue dalam fail JavaScript halaman:

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

Dalam kod di atas, kami menggunakan pembina Vue untuk mencipta tika Vue dan lekapkannya Pergi ke elemen DOM dengan id app. Pilihan render digunakan untuk memaparkan komponen, dan di sini kami telah memperkenalkan komponen yang dipanggil App.vue.

2. Gunakan Penghala Vue untuk mengurus penghalaan

Dalam aplikasi berbilang halaman, setiap halaman sepadan dengan laluan yang berbeza, jadi kita perlu menggunakan Penghala Vue untuk mengurus penghalaan. Vue Router ialah perpustakaan pengurusan penghalaan yang dilancarkan secara rasmi oleh Vue, yang boleh merealisasikan penukaran antara muka dan pemindahan data yang lancar.

Kami boleh memperkenalkan Vue Router ke dalam fail JavaScript setiap halaman dan membuat contoh penghalaan. Dalam contoh penghalaan, kita boleh mengkonfigurasi laluan penghalaan dan komponen yang sepadan bagi setiap halaman.

Sebagai contoh, dengan mengandaikan kami mempunyai dua halaman, iaitu /page1 dan /page2, kami boleh mengkonfigurasi yang berikut dalam contoh penghalaan:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Page1 from './Page1.vue';
import Page2 from './Page2.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
});

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

Dalam kod di atas, kami mula-mula memperkenalkan Vue Penghala dan gunakannya. Seterusnya, cipta tika penghalaan dan konfigurasikan dua laluan dalam tika penghalaan, iaitu /page1 dan /page2, sepadan dengan dua komponen Halaman1 dan Halaman2. Akhirnya jadikan contoh laluan sebagai pilihan untuk contoh Vue.

3. Gunakan VueX untuk mengurus status

Dalam aplikasi berbilang halaman, status antara halaman yang berbeza selalunya perlu dikongsi. Untuk melakukan ini, kita perlu memperkenalkan VueX, perpustakaan pengurusan negeri rasmi yang dilancarkan oleh Vue. VueX boleh mengurus status data komponen secara berpusat dan mencapai perkongsian status merentas komponen.

Dalam fail JavaScript setiap halaman, kami perlu memperkenalkan VueX dan mencipta kedai. Di kedai, kami boleh menentukan keadaan global dan menyediakan keupayaan untuk mengubah suai keadaan dan beroperasi secara tak segerak melalui mutasi dan tindakan.

Sebagai contoh, kita boleh mentakrifkan keadaan kaunter global dalam kedai:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000)
    }
  }
});

export default store;

Dalam kod di atas, kami mula-mula memperkenalkan VueX dan menggunakannya. Seterusnya, buat kedai dan tentukan keadaan kaunter global dalam keadaan. Dalam mutasi, kami menyediakan kaedah pengubahsuaian increment untuk negeri. Dalam tindakan, kami menyediakan operasi tak segerak incrementAsync untuk status, yang akan mengemas kini status selepas 1 saat.

4. Gunakan webpack untuk membungkus aplikasi

Akhir sekali, selepas kod aplikasi selesai, kita perlu menggunakan webpack untuk membungkus aplikasi ke dalam fail sebenar. Menggunakan webpack, kami boleh membungkus pelbagai modul JavaScript, fail CSS, imej dan sumber lain yang kami tulis ke dalam satu atau lebih fail output, dan merealisasikan pemampatan kod, pemisahan kod, pemuatan atas permintaan dan fungsi lain melalui konfigurasi.

Kami boleh mencipta projek Vue dengan cepat dengan memilih Webpack dalam Vue CLI. Jika anda sudah mempunyai projek sedia ada, anda boleh menggunakan webpack, vue-loader dan modul npm lain yang berkaitan untuk mengkonfigurasi webpack secara manual untuk membungkus projek.

Ringkasan:

Melalui empat langkah di atas, kita boleh menggunakan Vue untuk melaksanakan aplikasi asas berbilang halaman. Sudah tentu, dalam pembangunan sebenar, kita juga perlu mempertimbangkan lebih banyak fungsi dan pengoptimuman, seperti:

• Cara mencapai penggunaan semula komponen dan pengasingan kod.
• Cara untuk membuat laluan antara halaman yang berbeza.
• Cara melaksanakan interaksi data dengan API luaran.
• Cara mengoptimumkan cache aplikasi dan akses luar talian.

Tetapi dalam apa jua keadaan, sebagai rangka kerja yang pantas, mudah dan fleksibel, Vue sudah pasti merupakan pilihan yang baik untuk membangunkan aplikasi berbilang halaman.

Atas ialah kandungan terperinci Cara menggunakan vue berbilang halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!