Un exemple explique comment Vue implémente la fonction de tabulation sur le côté droit de la barre de navigation gauche

Vue est un framework JavaScript populaire qui peut être utilisé pour créer de puissantes applications Web. Dans cet article, nous présenterons comment utiliser Vue pour implémenter la page à onglet sur le côté droit de la barre de navigation de gauche.

Tout d’abord, nous devons créer une instance Vue afin de pouvoir utiliser les composants et les directives de Vue. Nous pouvons créer un nouveau projet Vue en utilisant Vue-cli.

Ensuite, nous devons réfléchir à la manière d'implémenter la barre de navigation de gauche. Nous pouvons utiliser le routeur de Vue et le routage imbriqué pour réaliser cette fonction. Il est très simple de créer un routeur et un composant parent dans lesquels imbriquer les routes enfants. Voici un exemple de code :

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
    }
  ]
}
]
})

Dans le code ci-dessus, nous avons créé un routeur et mis en place deux routes. La première route correspondra au chemin racine et affichera le composant Home, et la deuxième route correspondra au chemin /dashboard et affichera le composant Dashboard. Le composant Tableau de bord comporte deux sous-composants : Boîte de réception et Courrier.

La prochaine étape consiste à réfléchir à la manière d'afficher les onglets sur le côté droit. Nous pouvons créer un composant qui fera office de conteneur pour chaque onglet. Chaque onglet affichera le composant correspondant. Voici un exemple de code :

<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>

Dans le code ci-dessus, nous avons créé un composant appelé "Tabs". Il accepte une propriété appelée « valeur » qui contient des informations sur l'onglet actuel. Il mettra à jour la propriété "activeTab" lorsque l'onglet changera. Nous définissons également deux méthodes addTab et removeTab afin de pouvoir ajouter et supprimer dynamiquement des onglets.

Maintenant que nous avons les composants de routage et d'onglet, nous devons les fusionner. Nous pouvons utiliser le code suivant dans le composant Dashboard :

<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>

Dans le code ci-dessus, nous avons importé le composant Tabs créé précédemment et l'avons utilisé dans le composant Dashboard. Le composant onglet apparaîtra maintenant à droite.

Enfin, nous devons nous occuper de l'historique du navigateur. Lorsque nous modifions l'onglet, nous souhaitons que l'URL change également. Cela permettra aux utilisateurs de naviguer dans les onglets à l'aide des boutons avant et arrière du navigateur. Nous pouvons utiliser l'objet $route de Vue pour accéder à l'URL actuelle et mettre à jour l'URL lorsque l'onglet change. Voici un exemple de code :

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}`
  }
}

Dans le code ci-dessus, nous avons défini une méthode appelée updateUrl qui mettra à jour l'URL. Nous utilisons la méthode "push" pour mettre à jour l'URL. Nous avons également mis à jour le titre du document afin que lors du changement d'onglet, le titre soit également mis à jour.

Résumé

Vue est un framework JavaScript populaire qui peut être utilisé pour créer de puissantes applications Web. Dans cet article, nous expliquons comment utiliser Vue pour implémenter la page à onglet sur le côté droit de la barre de navigation de gauche. Nous avons utilisé le routeur et le routage imbriqué de Vue pour implémenter la barre de navigation de gauche, ainsi que les composants et directives de Vue pour implémenter la page à onglet. Nous avons également examiné la manière dont l'historique du navigateur est géré. J'espère que cet article pourra vous aider à comprendre Vue et le développement d'applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!