vue3 implémente une page multi-onglets d'une seule page

À l’ère d’Internet d’aujourd’hui, les habitudes d’utilisation des utilisateurs changent constamment. Dans le même temps, la technologie est constamment mise à jour. Dans le domaine de la technologie front-end, Vue.js est actuellement l'un des frameworks front-end les plus populaires. Sa troisième version, Vue3, a été officiellement publiée en septembre 2020. Par rapport à l'itération mise à jour de Vue2, Vue3 a considérablement amélioré ses fonctions et ses performances. Le plus remarquable est sa prise en charge des pages multi-onglets. Cet article explorera le processus pratique d'implémentation de la fonction multi-onglets d'une seule page dans Vue3.

1. Connaissances préalables

Avant d'introduire en profondeur la fonction multi-onglets de Vue3, vous devez comprendre plusieurs concepts de base de Vue3 :

1 Routage (itinéraire)

Le routage est très important dans le domaine. Concept front-end, qui se charge de gérer la relation entre l'URL du navigateur et la page. Dans Vue, nous pouvons implémenter des sauts de routage via Vue Router.

2. Component

Vue3 est un framework basé sur le développement de composants. Il divise une grande application en composants un par un, améliorant ainsi le taux de réutilisation et la maintenabilité du code.

3. Gestion de l'État

La gestion de l'État fait référence au stockage, à la gestion et à la coordination centralisés de l'État dans l'application. Dans Vue, nous utilisons Vuex pour implémenter la gestion des états.

2. Processus de mise en œuvre

Ce qui suit présentera comment utiliser Vue3 et Vue Router pour implémenter la fonction d'une seule page et de plusieurs onglets. L'implémentation spécifique peut être divisée en les étapes suivantes :

1. Installer Vue Router

Vue Router est la bibliothèque officielle de gestion de routage de Vue.js, qui peut facilement implémenter le saut de routage et la gestion d'applications d'une seule page. Installez Vue Router via npm :

npm install vue-router --save

2. Configurer le routage

Dans Vue3, la configuration du routage a changé par rapport à Vue2. Nous devons configurer le routage dans la méthode createApp : 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') 

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

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

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

3.创建标签页组件

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

import { defineComponent } from 'vue' 

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

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

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

Parmi eux, createWebHashHistory() spécifie l'utilisation de valeurs de hachage pour implémenter des sauts de routage, routes est un élément de configuration de routage. Nous définissons les itinéraires pour chaque onglet dans itinéraires, comme indiqué ci-dessous :

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

Dans le routage ici, nous définissons trois onglets, à savoir accueil et à propos et contactez-nous.

3. Créer un composant onglet

Ensuite, nous devons créer un composant onglet. Dans Vue3, la définition des composants a changé par rapport à Vue2. Nous devons utiliser la méthode defineComponent pour définir le composant :

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

Combiné avec la page à onglet définie dans le routage ci-dessus, nous pouvons restituer le composant correspondant dans la fonction render .

4. Ajouter une page à onglet

Ensuite, nous devons ajouter la fonction de page à onglet à l'application. On peut utiliser un tableau pour stocker les onglets ouverts. Chaque élément du tableau représente les informations d'un onglet :

rrreee

Parmi eux, title représente le titre de l'onglet, name représente le nom de l'onglet, et path représente le chemin de routage correspondant à l'onglet, isCurrent indique si l'onglet actuel est sélectionné.

Ensuite, nous devons implémenter la fonction d'ouverture des onglets. Lorsque nous cliquons sur une option du menu, nous devons d'abord déterminer si l'itinéraire correspondant existe déjà dans le tableau d'onglets. S'il existe déjà, définissez l'onglet actuel sur l'état sélectionné, sinon ajoutez un nouvel onglet : 🎜rrreee🎜 5. Fermez l'onglet 🎜🎜Enfin, nous devons également implémenter la fonction de fermeture de l'onglet. Lorsque nous cliquons sur le bouton de fermeture d'un onglet, nous devons supprimer l'onglet du tableau et définir l'onglet actuel sur l'onglet précédent : 🎜rrreee🎜 3. Résumé🎜🎜Grâce à l'introduction de cet article, nous avons découvert Vue3 Les bases idée et processus de mise en œuvre spécifique pour réaliser la fonction multi-onglets d'une seule page. Par rapport à Vue2, Vue3 présente quelques changements d'utilisation et doit être ajusté en fonction des besoins réels, mais son avantage de prendre en charge plusieurs onglets est toujours évident. Pour les développeurs qui ont besoin d'implémenter des fonctionnalités multipages dans des applications Web, l'émergence de Vue3 nous offre une bonne solution. 🎜

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!