Bagaimana untuk membuat dua skrin berpecah dalam vue

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina aplikasi web satu halaman yang dinamik. Komponen teras lapisan paparan, Vue.js, boleh membantu anda membina aplikasi yang mudah diselenggara sambil turut membolehkan anda mengendalikan interaksi pengguna dan komponen UI yang kompleks dengan lebih baik. Dalam kebanyakan aplikasi satu halaman, fungsi perniagaan perlu dibahagikan kepada beberapa halaman untuk paparan, dan beberapa perbandingan atau analisis maklumat juga diperlukan Pada masa ini, adalah sangat penting untuk menggunakan fungsi skrin belah. Artikel ini akan menerangkan kepada anda cara melaksanakan dua skrin pisah dalam projek Vue menggunakan kaedah Vue yang disyorkan secara rasmi.

1. Gunakan Vue-Router digabungkan dengan komponen paparan untuk mencapai skrin belah

Mula-mula, pasang Vue-Router (boleh dipasang melalui npm install vue-router). Vue-Router ialah pengurus penghalaan rasmi untuk Vue.js. Ia disepadukan secara mendalam dengan teras Vue.js, menjadikannya lebih mudah untuk membina aplikasi satu halaman. Berikut ialah langkah-langkah untuk menggunakan Vue-Router untuk melaksanakan skrin belah:

1. Buat projek Vue

Masukkan arahan berikut pada baris arahan untuk mencipta Vue baharu projek:

vue create my-project

Adalah diandaikan bahawa anda telah memasang Vue.js mengikut dokumentasi rasmi Vue.js.

2. Buat dua komponen paparan

Dalam projek anda, cipta dua komponen Vue baharu, LeftPane.vue dan RightPane.vue. Kedua-dua komponen ini akan berfungsi sebagai komponen paparan skrin belah dan setiap komponen akan mempamerkan sebahagian daripada UI dan fungsi aplikasi.

Kod sampel boleh dirujuk seperti berikut:

LeftPane.vue:

<template>
  <div class="left-pane">
    <h3>左侧面板</h3>
    <!-- 添加具体的内容 -->
  </div>
</template>

<script>
export default {
  name: 'LeftPane'
  // 添加其他逻辑
}
</script>

<style scoped>
.left-pane {
  width: 50%;
  float: left;
}
</style>

RightPane.vue:

<template>
  <div class="right-pane">
    <h3>右侧面板</h3>
    <!-- 添加具体的内容 -->
  </div>
</template>

<script>
export default {
  name: 'RightPane'
  // 添加其他逻辑
}
</script>

<style scoped>
.right-pane {
  width: 50%;
  float: right;
}
</style>

Gaya di sini boleh disesuaikan mengikut kepada keperluan sebenar anda Pelarasan.

3. Buat konfigurasi laluan

Dalam aplikasi Vue anda, cipta folder baharu router. Cipta fail index.js di bawah folder ini untuk menentukan konfigurasi penghalaan. Kod sampel adalah seperti berikut:

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

import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/left', component: LeftPane },
  { path: '/right', component: RightPane }
]

const router = new VueRouter({
  routes
})

export default router

Di sini, anda perlu memperkenalkan LeftPane.vue dan RightPane.vue ke dalam fail penghalaan dan mentakrifkan peraturan penghalaan. Dengan cara ini, apabila penghalaan aplikasi ditukar, Vue-Router akan memaparkan komponen skrin pisah yang berbeza mengikut peraturan penghalaan yang berbeza.

4. Konfigurasikan penghalaan dalam contoh akar Vue

Cari fail main.js projek anda Selepas mengimport Vue.js, kodnya adalah seperti berikut:

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

Vue.config.productionTip = false

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

Dalam kod ini, anda akan mengkonfigurasi komponen App sebagai contoh akar Vue dan menghantar router sebagai parameter ke dalam komponen. Ini membolehkan anda menggunakan fungsi penghalaan dalam aplikasi anda.

5. Lekapkan paparan laluan

Langkah terakhir ialah untuk melekapkan paparan laluan dalam App.vue, yang akan mendayakan kefungsian skrin belah dalam aplikasi anda. Contoh kod adalah seperti berikut:

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

<script>
export default {
  name: 'App',
  // 添加其他逻辑
}
</script>

router-view di sini akan dipaparkan sama ada LeftPane.vue atau RightPane.vue bergantung pada peraturan penghalaan dan klik pengguna.

2. Gunakan Vue-Router digabungkan dengan paparan dinamakan untuk melaksanakan skrin belah

Selain kaedah yang diperkenalkan di atas, Vue-Router juga menyokong penggunaan paparan dinamakan untuk melaksanakan skrin pisah kefungsian. Kaedah ini membolehkan anda memaparkan berbilang komponen paparan pada masa yang sama di bawah peraturan penghalaan yang sama untuk mencapai kesan skrin belah. Berikut ialah langkah untuk melaksanakan skrin pisah menggunakan paparan bernama:

1. Buat Paparan Dinamakan

Dalam App.vue anda, buat dua paparan bernama, left dan right. Kod sampel adalah seperti berikut:

<template>
  <div id="app">
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
  // 添加其他逻辑
}
</script>

Komponen router-view di sini dinamakan left dan right masing-masing, dan akan dimuatkan pada halaman utama aplikasi pada masa yang sama.

2. Ubah suai konfigurasi penghalaan

Dalam fail konfigurasi penghalaan, ubah suai peraturan penghalaan untuk memaparkan dua komponen di bawah peraturan yang sama pada masa yang sama. Kod sampel adalah seperti berikut:

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

import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    components: {
      left: LeftPane,
      right: RightPane
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

Di sini, peraturan penghalaan diubah suai kepada path: '/', components:. Juga di bawah peraturan ini, komponen LeftPane.vue dan RightPane.vue masing-masing dinamakan left dan right. Dengan cara ini, apabila pengguna melawat laluan akar aplikasi, kedua-dua komponen akan dipaparkan pada halaman utama aplikasi.

Ringkasan

Di atas ialah cara menggunakan fungsi skrin belah dalam Vue. Kesan skrin pisah boleh dicapai dengan menggunakan Vue-Router digabungkan dengan komponen paparan atau paparan bernama. Memilih kaedah yang berbeza untuk melaksanakan fungsi skrin belah mengikut keperluan sebenar dalam projek akan membantu meningkatkan pengalaman pengguna dan kemudahan penggunaan aplikasi.

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