vue3 melaksanakan halaman berbilang tab satu halaman

Dalam era Internet hari ini, tabiat penggunaan pengguna sentiasa berubah. Pada masa yang sama, teknologi sentiasa dikemas kini. Dalam bidang teknologi bahagian hadapan, Vue.js kini merupakan salah satu rangka kerja bahagian hadapan yang paling popular, versi ketiganya, Vue3, telah dikeluarkan secara rasmi pada September 2020. Berbanding dengan lelaran Vue2 yang dikemas kini, Vue3 telah meningkatkan fungsi dan prestasi yang paling penting ialah sokongannya untuk berbilang tab. Artikel ini akan meneroka proses praktikal untuk melaksanakan fungsi berbilang tab halaman tunggal dalam Vue3.

1. Pengetahuan prasyarat

Sebelum memperkenalkan fungsi berbilang tab Vue3 secara mendalam, anda perlu memahami beberapa konsep asas Vue3:

1.

Penghalaan ialah konsep yang sangat penting di bahagian hadapan Ia bertanggungjawab untuk menguruskan hubungan antara URL penyemak imbas dan halaman. Dalam Vue, kita boleh melaksanakan lompatan penghalaan melalui Penghala Vue.

2. Komponen

Vue3 ialah rangka kerja berdasarkan pembangunan komponen, yang membahagikan aplikasi besar kepada komponen satu demi satu, dan setiap komponen boleh digunakan semula, yang meningkatkan penggunaan semula dan kebolehselenggaraan.

3. Pengurusan Negeri (Pengurusan Negeri)

Pengurusan negeri merujuk kepada penyimpanan berpusat, pengurusan dan penyelarasan negeri dalam aplikasi. Dalam Vue, kami menggunakan Vuex untuk melaksanakan pengurusan negeri.

2. Proses pelaksanaan

Berikut akan memperkenalkan cara menggunakan Vue3 dan Vue Router untuk melaksanakan fungsi satu halaman dan berbilang tab. Pelaksanaan khusus boleh dibahagikan kepada langkah-langkah berikut:

1 Pasang Penghala Vue

Penghala Vue ialah pustaka pengurusan penghalaan rasmi Vue.js, yang boleh melaksanakan lompatan dan penghalaan laluan dengan mudah. mengurus aplikasi satu halaman. Pasang Penghala Vue melalui npm:

npm install vue-router --save

2 Konfigurasikan penghalaan

Dalam Vue3, konfigurasi penghalaan telah berubah berbanding dengan Vue2. Kita perlu mengkonfigurasi penghalaan dalam kaedah createApp:

//导入Vue Router 
import { createRouter, createWebHashHistory } from 'vue-router' 

//创建路由 
const router = createRouter({   history: createWebHashHistory(),   routes: routes }) 

//创建Vue App 
const app = createApp(App) 

//挂载路由 
app.use(router).mount('#app') 

di mana createWebHashHistory() menentukan penggunaan nilai cincang ​​untuk melaksanakan lompatan penghalaan, dan routes ialah item konfigurasi penghalaan. Kami mentakrifkan laluan untuk setiap halaman tab dalam routes, seperti berikut:

const routes = [   { path: '/', component: Home, name: 'home', meta: { title: '主页' } },   { path: '/about', component: About, name: 'about', meta: { title: '关于' } },   { path: '/contact', component: Contact, name: 'contact', meta: { title: '联系我们' } } ] 

Dalam laluan ini, kami mentakrifkan tiga halaman tab, iaitu rumah, tentang dan Hubungi kami.

3. Cipta komponen tab

Seterusnya, kita perlu mencipta komponen tab. Dalam Vue3, takrifan komponen telah berubah berbanding dengan Vue2. Kita perlu menggunakan kaedah defineComponent untuk mentakrifkan komponen:

import { defineComponent } from 'vue' 

export default defineComponent({   name: 'Home',   setup() {       return {}   },   render() {       return (           <div>                 这是主页             </div>       )   } }) 

Digabungkan dengan halaman tab yang ditakrifkan dalam penghalaan di atas, kita boleh menjadikan komponen yang sepadan dalam fungsi render.

4. Tambah halaman tab

Seterusnya, kita perlu menambah fungsi halaman tab pada aplikasi. Kita boleh menggunakan tatasusunan untuk menyimpan tab terbuka Setiap elemen tatasusunan mewakili maklumat tab:

tabs: [    { title: '主页', name: 'home', path: '/', isCurrent: true },    { title: '关于', name: 'about', path: '/about', isCurrent: false },    { title: '联系我们', name: 'contact', path: '/contact', isCurrent: false } ]

Antaranya, tajuk mewakili tajuk tab, nama mewakili nama tab dan laluan mewakili tab. tab. Laluan penghalaan yang sepadan, isCurrent menunjukkan sama ada tab semasa dipilih.

Seterusnya, kita perlu melaksanakan fungsi pembukaan tab. Apabila mengklik pilihan dalam menu, kita perlu terlebih dahulu menentukan sama ada laluan yang sepadan sudah wujud dalam tatasusunan tab. Jika ia sudah wujud, tetapkan tab semasa kepada keadaan yang dipilih, jika tidak tambahkan tab baharu:

//打开标签页 
openTab(tab) {  
   let routerName = this.$router.currentRoute.value.name   
   let t = this.tabs.find(x => x.name === tab.name)  
   if (!t) {       //不存在，新增标签页        
        this.tabs.push({ name: tab.name, title: tab.meta.title, path: tab.path, isCurrent: true })      
   } else {       //已存在，设为当前标签页      
        this.tabs.forEach(x => x.isCurrent = false)      
        t.isCurrent = true      
        this.$router.push(t.path)  
   }  
} 

5 Tutup tab

Akhir sekali, kita juga perlu menutup Fungsi tab. Apabila butang tutup pada tab diklik, kita perlu memadamkan tab daripada tatasusunan dan menetapkan tab semasa ke tab sebelumnya:

//关闭标签页 
closeTab(tab) {      
   let i = this.tabs.findIndex(x => x.name === tab.name)      
   this.tabs.splice(i, 1)      

   let currentTab = this.tabs.find(x => x.isCurrent === true)      
   if (currentTab) {          
      this.$router.push(currentTab.path)      
   }  else {          
      this.$router.push('/')      
   }  
}

3. Ringkasan

Lulus Dalam pengenalan artikel ini, kami telah mempelajari tentang idea asas dan proses pelaksanaan khusus Vue3 untuk melaksanakan fungsi berbilang tab satu halaman. Berbanding dengan Vue2, Vue3 mempunyai beberapa perubahan dalam penggunaan dan perlu dilaraskan mengikut keperluan sebenar, tetapi kelebihannya untuk menyokong berbilang tab masih jelas. Bagi pembangun yang perlu melaksanakan fungsi berbilang halaman dalam aplikasi web, kemunculan Vue3 memberikan kami penyelesaian yang baik.

Atas ialah kandungan terperinci vue3 melaksanakan halaman berbilang tab satu halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!