Bagaimana untuk membuat paparan halaman baharu dalam reka letak vue

Dengan populariti rangka kerja Vue, semakin ramai pembangun web mula menggunakannya untuk membangunkan aplikasi web yang komprehensif. Dokumentasi dan komuniti Vue juga sentiasa berkembang untuk memenuhi keperluan pengguna Vue yang berubah-ubah. Walau bagaimanapun, soalan yang paling biasa bagi mereka yang ingin melaksanakan susun atur lengkap dalam Vue ialah bagaimana untuk membuat paparan halaman baharu dalam Reka Letak. Jika anda juga menghadapi masalah ini, jangan risau. Artikel ini akan memperkenalkan beberapa kaedah untuk menyelesaikannya.

Vue.js menggunakan banyak konsep, termasuk komponen, templat dan penghalaan. Konsep ini menjadikan pembangunan Vue sangat fleksibel dan mudah diselenggara. Untuk susun atur halaman, Vue menyediakan susun atur konsep. Susun atur ialah komponen yang digunakan untuk menentukan susun atur halaman, termasuk pengepala, bar sisi, bahagian bawah dan kawasan kandungan utama. Dalam Vue, reka letak biasanya terletak dalam komponen App.vue atau komponen akar yang serupa dan mengandungi komponen anak lain.

Dalam aplikasi web tradisional, apabila kami mengklik pautan atau menyerahkan borang, pelayan akan menyediakan halaman baharu. Tetapi dalam Vue, kami biasanya menggunakan penghala Vue. Penghala Vue ialah alat yang membenarkan mentakrifkan semua laluan yang mungkin dalam aplikasi, dan komponen yang sepadan dengan laluan ini. Ini bermakna kita boleh memanfaatkan Penghala Vue untuk membuka mana-mana komponen dalam aplikasi Vue, dan bukannya hanya memuatkan halaman HTML baharu.

Berikut ialah beberapa kaedah penghala Vue untuk membuka komponen baharu:

1. router.push()

kaedah router.push() membolehkan kami memulakan komponen baharu daripada peralihan A daripada satu komponen ke komponen lain, sama seperti mengklik pautan. Contohnya:

this.$router.push('/dashboard');

Ini akan menavigasi ke komponen bernama "Papan Pemuka". Kaedah

2. router.replace()

router.replace() membolehkan kami menggantikan rekod dalam sejarah laluan semasa tanpa menambah item sejarah baharu. Contohnya:

this.$router.replace('/dashboard');

Ini akan menavigasi ke komponen bernama "Papan Pemuka" dan menggantikan item sejarah laluan semasa. Kaedah

3. router.go()

router.go() membolehkan kami menggerakkan beberapa langkah ke hadapan atau ke belakang yang ditentukan dalam sejarah. Contohnya:

this.$router.go(-1);

Ini akan mengambil langkah ke belakang dalam sejarah.

Gunakan kaedah ini dalam penghala Vue untuk membuka komponen baharu dalam reka letak. Kita boleh menentukan paparan laluan dalam komponen susun atur untuk memaparkan komponen dalam paparan susun atur. Menggunakan pendekatan ini kami memastikan setiap halaman baharu dibuka dalam reka letak.

Berikut ialah kod untuk sampel fail .vue, yang mengandungi komponen reka letak, paparan utama dan paparan laluan:

<template>
  <div id="app">
    <layout>
      <router-view />
    </layout>
  </div>
</template>

<script>
import Layout from './components/Layout.vue';

export default {
  components: {
    Layout
  },
};
</script>

Dalam kod di atas, kami mula-mula mengimport komponen reka letak kami , dan kemudian takrifkannya dalam templat. Kami juga menggunakan pandangan laluan dalam definisi kami. Paparan ini akan dibuka di dalam komponen kami.

Untuk menentukan laluan dengan lebih jelas dalam penghala, kita perlu memasukkan kod berikut dalam objek penghala:

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
});

Dalam perkara di atas, kami menentukan dua laluan, satu ialah / , satu ialah /papan pemuka. Apabila pengguna mengakses URL, Penghala akan membuka sama ada komponen Laman Utama atau komponen Papan Pemuka, bergantung pada URL yang diakses oleh pengguna.

Dalam aplikasi Vue yang lengkap, komponen lain boleh ditambah pada reka letak seperti di atas.

Ringkasan

Dalam Vue JS, komponen Reka Letak ialah kaedah untuk mengedarkan elemen secara munasabah dalam halaman web. Menggunakan kaedah dalam penghala Vue, kami boleh membuka komponen baharu dalam komponen Reka Letak dan bukannya memuatkannya dalam halaman berasingan. Ini boleh mempercepatkan penukaran halaman dan menjadikan aplikasi web mempunyai pengalaman pengguna yang lebih baik. Selepas menyelesaikan masalah di atas, saya percaya ia akan membantu anda membangunkan aplikasi Vue berkualiti tinggi dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk membuat paparan halaman baharu dalam reka letak vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!