vue3實作單頁多標籤頁-前端問答-PHP中文網

vue3實作單頁多標籤頁

WBOY

發布： 2023-05-24 12:39:07

原創

2205 人瀏覽過

在現在的網路時代，使用者的使用習慣不斷改變。同時，技術也在不斷更新。在前端技術領域中，Vue.js作為目前最受歡迎的前端框架之一，其三個版本Vue3於2020年9月正式發布。 Vue3相比於Vue2的更新迭代，功能和效能都得到了大幅的提升，其中最值得一提的就是其支援多標籤頁。本文就來探討Vue3實作單頁多標籤頁功能的實作過程。

一、前置知識

在深入介紹Vue3實作多標籤頁功能之前，需要對Vue3的幾個基本概念有所了解：

1.路由( route)

路由是前端中非常重要的一個概念，它負責管理瀏覽器的URL和頁面之間的關係。在Vue中，我們可以透過Vue Router來實現路由的跳躍。

2.元件(Component)

Vue3是以元件化開發為基礎的框架，將一個大的應用程式拆分成一個一個的元件，每個元件都可以重複使用，提高了程式碼的複用率和維護性。

3.狀態管理(State Management)

狀態管理指的是將應用程式中的狀態集中儲存、管理和協調。在Vue中，我們使用Vuex來實現狀態管理。

二、實作流程

以下將介紹如何使用Vue3和Vue Router來實作單頁多標籤頁的功能。具體實作可分為以下步驟：

1.安裝Vue Router

Vue Router是Vue.js官方的路由管理函式庫，可以方便地實作單頁應用程式的路由跳轉和管理。透過npm安裝Vue Router：

npm install vue-router --save

登入後複製

2.設定路由

在Vue3中，設定路由相比Vue2有所變化。我們需要在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函數中渲染對應的元件。

4.增加標籤頁

下面，我們需要為應用程式增加標籤頁功能。我們可以使用一個陣列來儲存開啟的標籤頁，每個陣列元素表示一個標籤頁的資訊：

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

登入後複製

其中，title表示標籤頁的標題，name表示標籤頁的名稱，path表示標籤頁對應的路由路徑，isCurrent表示目前標籤頁是否被選取。

接下來，我們需要實作標籤頁的開啟功能。當點擊選單中的某個選項時，我們需要先判斷對應的路由是否已經存在於標籤頁數組中。如果已經存在，就將目前標籤頁設為選取狀態，否則就新增一個標籤頁：

//打开标签页 
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.關閉標籤頁

#最後，我們還需要實作標籤頁的關閉功能。當點擊標籤頁上的關閉按鈕時，我們需要將該標籤頁從數組中刪除，同時將當前標籤頁設為上一個標籤頁：

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

登入後複製