vue3 implements single page multi-tab page

In today’s Internet era, users’ usage habits are constantly changing. At the same time, technology is constantly being updated. In the field of front-end technology, Vue.js is currently one of the most popular front-end frameworks. Its third version, Vue3, was officially released in September 2020. Compared with the updated iteration of Vue2, Vue3 has greatly improved functions and performance. The most noteworthy one is its support for multi-tab pages. This article will explore the practical process of implementing the single-page multi-tab function in Vue3.

1. Pre-requisite knowledge

Before introducing the multi-tab function of Vue3 in depth, you need to understand several basic concepts of Vue3:

1. Routing ( route)

Routing is a very important concept in the front-end. It is responsible for managing the relationship between the browser's URL and the page. In Vue, we can implement routing jumps through Vue Router.

2. Component

Vue3 is a framework based on component development. It splits a large application into components one by one, and each component can be reused. , which improves code reuse and maintainability.

3. State Management (State Management)

State management refers to the centralized storage, management and coordination of the state in the application. In Vue, we use Vuex to implement state management.

2. Implementation process

The following will introduce how to use Vue3 and Vue Router to implement the function of single page and multiple tabs. The specific implementation can be divided into the following steps:

1. Install Vue Router

Vue Router is the official routing management library of Vue.js, which can easily implement routing jumps and routing of single-page applications. manage. Install Vue Router through npm:

npm install vue-router --save

2. Configure routing

In Vue3, configuring routing has changed compared to Vue2. We need to configure routing in the createApp method:

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

Among them, createWebHashHistory() specifies the use of hash values ​​to implement routing jumps, routes is the routing configuration item. We define the route of each tab page in routes, as shown below:

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

In the routing here, we define three tab pages, namely home page (home), about page (about) and contact us (contact).

3. Create a tab component

Next, we need to create a tab component. In Vue3, the definition of components has changed compared to Vue2. We need to use the defineComponent method to define the component:

import { defineComponent } from 'vue' 

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

Combined with the tab page defined in the routing above, we can render the corresponding component in the render function.

4. Add a tab page

Next, we need to add a tab page function to the application. We can use an array to store open tabs. Each array element represents the information of a tab:

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

Among them, title represents the title of the tab, name represents the name of the tab, and path represents the tab. The corresponding routing path, isCurrent indicates whether the current tab is selected.

Next, we need to implement the tab opening function. When clicking an option in the menu, we need to first determine whether the corresponding route already exists in the tab array. If it already exists, set the current tab to the selected state, otherwise add a new tab:

//打开标签页 
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. Close the tab

Finally, we also need to close the tab Function. When clicking the close button on a tab, we need to delete the tab from the array and set the current tab to the previous tab:

//关闭标签页 
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. Summary

Passed In the introduction of this article, we have learned about the basic ideas and specific implementation process of Vue3 to implement the single-page multi-tab function. Compared with Vue2, Vue3 has some changes in usage and needs to be adjusted according to actual needs, but its advantage of supporting multiple tabs is still self-evident. For developers who need to implement multi-page functionality in web applications, the emergence of Vue3 provides us with a good solution.

The above is the detailed content of vue3 implements single page multi-tab page. For more information, please follow other related articles on the PHP Chinese website!