vue3 implementiert eine einseitige Seite mit mehreren Registerkarten

Im heutigen Internetzeitalter ändern sich die Nutzungsgewohnheiten der Nutzer ständig. Gleichzeitig wird die Technologie ständig weiterentwickelt. Im Bereich der Frontend-Technologie ist Vue.js derzeit eines der beliebtesten Frontend-Frameworks. Die dritte Version, Vue3, wurde im September 2020 offiziell veröffentlicht. Im Vergleich zur aktualisierten Version von Vue2 weist Vue3 deutlich verbesserte Funktionen und Leistung auf. Am bemerkenswertesten ist die Unterstützung von Seiten mit mehreren Registerkarten. In diesem Artikel wird der praktische Prozess der Implementierung der Single-Page-Multi-Tab-Funktion in Vue3 untersucht.

1. Erforderliche Kenntnisse

Bevor Sie die Multi-Tab-Funktion von Vue3 eingehend einführen, müssen Sie einige grundlegende Konzepte von Vue3 verstehen:

1. Routing ist ein sehr wichtiges Konzept Front-End-Konzept, das für die Verwaltung der Beziehung zwischen der URL des Browsers und der Seite verantwortlich ist. In Vue können wir Routing-Sprünge über den Vue-Router implementieren.

2. Komponente

Vue3 ist ein Framework, das auf der Komponentenentwicklung basiert. Jede Komponente kann wiederverwendet werden, wodurch die Wiederverwendungsrate und Wartbarkeit verbessert wird.

3. Staatsverwaltung

Staatsverwaltung bezieht sich auf die zentrale Speicherung, Verwaltung und Koordination des Staates in der Anwendung. In Vue verwenden wir Vuex, um die Zustandsverwaltung zu implementieren.

2. Implementierungsprozess

Im Folgenden wird erläutert, wie Sie mit Vue3 und Vue Router die Funktion einer einzelnen Seite und mehrerer Registerkarten implementieren. Die spezifische Implementierung kann in die folgenden Schritte unterteilt werden:

1. Vue Router installieren

Vue Router ist die offizielle Routing-Verwaltungsbibliothek von Vue.js, mit der Routing-Sprünge und die Verwaltung von Einzelseitenanwendungen problemlos implementiert werden können. Installieren Sie den Vue-Router über npm:

npm install vue-router --save

2. Konfigurieren Sie das Routing

In Vue3 hat sich die Konfiguration des Routings im Vergleich zu Vue2 geändert. Wir müssen das Routing in der Methode createApp konfigurieren:

//导入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') 

Unter anderem spezifiziert createWebHashHistory() die Verwendung von Hash-Werten zur Implementierung von Routing-Sprüngen, Routen </code > ist ein Routing-Konfigurationselement. Wir definieren die Routen für jede Registerkarte in <code>Routen, wie unten gezeigt: createApp方法中配置路由：

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: '联系我们' } } ] 

其中，createWebHashHistory()是指定使用哈希值来实现路由跳转，routes是路由的配置项。我们在routes中定义每个标签页的路由，如下所示：

import { defineComponent } from 'vue' 

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

在这里路由中，我们定义了三个标签页，分别是主页(home)、关于(about)和联系我们(contact)。

3.创建标签页组件

接下来，我们需要创建标签页组件。在Vue3中，组件的定义相比Vue2有所变化。我们需要使用defineComponent方法来定义组件：

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

结合上文路由中定义的标签页，我们可以在render

//打开标签页 
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)  
   }  
} 

In der Routenplanung hier definieren wir drei Registerkarten, nämlich „Heim“ und „Über“ und „Kontaktieren Sie uns“.

3. Erstellen Sie eine Tab-Komponente

Als nächstes müssen wir eine Tab-Komponente erstellen. In Vue3 hat sich die Definition von Komponenten im Vergleich zu Vue2 geändert. Wir müssen die Methode defineComponent verwenden, um die Komponente zu definieren:

//关闭标签页 
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('/')      
   }  
}

In Kombination mit der im Routing oben definierten Registerkarte können wir die entsprechende Komponente in der Funktion render rendern .

4. Tab-Seite hinzufügen

Als nächstes müssen wir der Anwendung eine Tab-Seitenfunktion hinzufügen. Wir können ein Array verwenden, um geöffnete Registerkarten zu speichern. Jedes Array-Element stellt die Informationen einer Registerkarte dar:

rrreee

Unter ihnen stellt „title“ den Titel der Registerkarte dar, „name“ stellt den Namen der Registerkarte dar und „path“ stellt den entsprechenden Routing-Pfad dar isCurrent gibt an, ob die aktuelle Registerkarte ausgewählt ist.

Als nächstes müssen wir die Tab-Öffnungsfunktion implementieren. Wenn wir im Menü auf eine Option klicken, müssen wir zunächst feststellen, ob die entsprechende Route bereits im Tab-Array vorhanden ist. Wenn es bereits vorhanden ist, setzen Sie den aktuellen Tab auf den ausgewählten Status, andernfalls fügen Sie einen neuen Tab hinzu:

rrreee

5. Schließen Sie den Tab 🎜🎜Zuletzt müssen wir noch die Schließfunktion des Tabs implementieren. Wenn wir auf einer Registerkarte auf die Schaltfläche „Schließen“ klicken, müssen wir die Registerkarte aus dem Array löschen und die aktuelle Registerkarte auf die vorherige Registerkarte setzen: 🎜rrreee🎜 3. Zusammenfassung🎜🎜Durch die Einführung dieses Artikels haben wir etwas über Vue3 The Basic gelernt Idee und konkreter Umsetzungsprozess zur Realisierung der Multi-Tab-Funktion einer einzelnen Seite. Im Vergleich zu Vue2 weist Vue3 einige Änderungen in der Verwendung auf und muss an die tatsächlichen Anforderungen angepasst werden. Der Vorteil der Unterstützung mehrerer Registerkarten liegt jedoch immer noch auf der Hand. Für Entwickler, die mehrseitige Funktionalität in Webanwendungen implementieren müssen, bietet uns das Aufkommen von Vue3 eine gute Lösung. 🎜

Das obige ist der detaillierte Inhalt vonvue3 implementiert eine einseitige Seite mit mehreren Registerkarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!