An einem Beispiel wird erläutert, wie Vue die Tab-Funktion auf der rechten Seite der linken Navigationsleiste implementiert

Vue ist ein beliebtes JavaScript-Framework, mit dem leistungsstarke Webanwendungen erstellt werden können. In diesem Artikel stellen wir vor, wie Sie mit Vue die Registerkarte auf der rechten Seite der linken Navigationsleiste implementieren.

Zuerst müssen wir eine Vue-Instanz erstellen, damit wir die Komponenten und Anweisungen von Vue verwenden können. Mit Vue-cli können wir ein neues Vue-Projekt erstellen.

Als nächstes müssen wir überlegen, wie wir die linke Navigationsleiste implementieren. Wir können den Router und das verschachtelte Routing von Vue verwenden, um diese Funktion zu erreichen. Es ist sehr einfach, einen Router und eine übergeordnete Komponente zu erstellen, in der untergeordnete Routen verschachtelt werden. Hier ist ein Beispielcode:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Dashboard from './views/Dashboard.vue'
import Inbox from './views/Inbox.vue'
import Mail from './views/Mail.vue'

Vue.use(Router)

export default new Router({
routes: [
{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/dashboard',
  name: 'dashboard',
  component: Dashboard,
  children: [
    {
      path: '/inbox',
      name: 'inbox',
      component: Inbox
    },
    {
      path: '/mail/:id',
      name: 'mail',
      component: Mail
    }
  ]
}
]
})

Im obigen Code haben wir einen Router erstellt und zwei Routen eingerichtet. Die erste Route entspricht dem Stammpfad und zeigt die Home-Komponente an, und die zweite Route entspricht dem /dashboard-Pfad und zeigt die Dashboard-Komponente an. Die Dashboard-Komponente besteht aus zwei Unterkomponenten: Posteingang und E-Mail.

Der nächste Schritt besteht darin, darüber nachzudenken, wie Registerkarten auf der rechten Seite angezeigt werden. Wir können eine Komponente erstellen, die als Container für jede Registerkarte fungiert. Jede Registerkarte rendert die entsprechende Komponente. Hier ist ein Beispielcode:

<template>
<div>
  <div class="tabs">
    <ul>
      <li v-for="(tab, index) in tabs" :key="tab.name" 
  :class="{&#39;is-active&#39;: activeTab === index }" 
  @click="activeTab = index">
        {{tab.name}}
        <button class="delete is-small" @click.stop
  ="removeTab(index)"></button>
      </li>
    </ul>
  </div>
  <component v-if="tabs.length" :is="tabs[activeTab].component"></component>
  <router-view v-else></router-view>
</div>
</template>

<script>
export default {
name: 'Tabs',
props: {
  value: {
    type: Object,
    required: true
  }
},
data() {
  return {
    tabs: [this.value],
    activeTab: 0
  }
},
methods: {
  addTab(tab) {
    const index = this.tabs.findIndex(t => t.name === tab.name)
    if (index === -1) {
      this.tabs.push(tab)
      this.activeTab = this.tabs.length - 1
    } else {
      this.activeTab = index
    }
  },
  removeTab(index) {
    this.tabs.splice(index, 1)
    if (this.tabs.length === 0) {
      this.$router.push('/')
    } else if (this.activeTab === index) {
      this.activeTab = this.tabs.length - 1
    }
  }
},
mounted() {
  if (this.$route.params.id) {
    const tab = {
      name: `Mail ${this.$route.params.id}`,
      component: () =>
        import(/* webpackChunkName: "mail" */
        './Mail.vue')
    }
    this.addTab(tab)
  }
}
}
</script>

Im obigen Code haben wir eine Komponente namens „Tabs“ erstellt. Es akzeptiert eine Eigenschaft namens „value“, die Informationen über die aktuelle Registerkarte enthält. Die Eigenschaft „activeTab“ wird aktualisiert, wenn sich die Registerkarte ändert. Wir definieren außerdem zwei Methoden addTab und removeTab, damit wir Tabs dynamisch hinzufügen und entfernen können.

Da wir nun die Routing- und Tab-Komponenten haben, müssen wir sie zusammenführen. Wir können den folgenden Code in der Dashboard-Komponente verwenden:

<template>
<div class="dashboard">
  <div class="columns">
    <div class="column is-one-fifth">
      <div class="menu">
        <router-link to="/">Home</router-link>
        <router-link to="/dashboard/inbox">Inbox</router-link>
      </div>
    </div>
    <div class="column">
      <Tabs :value="{name: &#39;Dashboard&#39;, component: Dashboard}"></Tabs>
    </div>
  </div>
</div>
</template>

<script>
import Tabs from '../components/Tabs.vue'

export default {
name: 'Dashboard',
components: {
  Tabs
},
}
</script>

Im obigen Code haben wir die zuvor erstellte Tabs-Komponente importiert und in der Dashboard-Komponente verwendet. Die Registerkartenkomponente wird nun rechts angezeigt.

Schließlich müssen wir uns mit dem Browserverlauf befassen. Wenn wir die Registerkarte ändern, soll sich auch die URL ändern. Dadurch können Benutzer mithilfe der Vorwärts- und Zurück-Schaltflächen des Browsers durch Registerkarten navigieren. Wir können das $route-Objekt von Vue verwenden, um auf die aktuelle URL zuzugreifen und die URL zu aktualisieren, wenn sich die Registerkarte ändert. Hier ist ein Beispielcode:

methods: {
  addTab(tab) {
    const index = this.tabs.findIndex(t => t.name === tab.name)
    if (index === -1) {
      this.tabs.push(tab)
      this.activeTab = this.tabs.length - 1
      this.updateUrl(tab)
    } else {
      this.activeTab = index
    }
  },
  removeTab(index) {
    this.tabs.splice(index, 1)
    if (this.tabs.length === 0) {
      this.$router.push('/')
    } else if (this.activeTab === index) {
      this.activeTab = this.tabs.length - 1
      this.updateUrl(this.tabs[this.activeTab])
    }
  },
  updateUrl(tab) {
    this.$router.push(`/dashboard/${tab.name.toLowerCase().replace(/\s+/g, '-')}`)
    document.title = `Dashboard - ${tab.name}`
  }
}

Im obigen Code haben wir eine Methode namens updateUrl definiert, die die URL aktualisiert. Wir verwenden die „Push“-Methode, um die URL zu aktualisieren. Wir haben auch den Dokumenttitel aktualisiert, sodass beim Wechseln der Registerkarten auch der Titel aktualisiert wird.

Zusammenfassung

Vue ist ein beliebtes JavaScript-Framework, mit dem leistungsstarke Webanwendungen erstellt werden können. In diesem Artikel stellen wir vor, wie Sie mit Vue die Registerkarte auf der rechten Seite der linken Navigationsleiste implementieren. Wir haben den Router und das verschachtelte Routing von Vue verwendet, um die linke Navigationsleiste zu implementieren, und Vue-Komponenten und -Anweisungen verwendet, um die Registerkartenseite zu implementieren. Wir haben uns auch angeschaut, wie der Browserverlauf verwaltet wird. Ich hoffe, dieser Artikel kann Ihnen helfen, Vue und die Entwicklung von Webanwendungen zu verstehen.

Das obige ist der detaillierte Inhalt vonAn einem Beispiel wird erläutert, wie Vue die Tab-Funktion auf der rechten Seite der linken Navigationsleiste implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!