vue3은 단일 페이지 다중 탭 페이지를 구현합니다.

오늘날 인터넷 시대에 사용자의 사용 습관은 끊임없이 변화하고 있습니다. 동시에 기술은 지속적으로 업데이트되고 있습니다. 프런트엔드 기술 분야에서 Vue.js는 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나이며, 세 번째 버전인 Vue3이 2020년 9월에 공식 출시되었습니다. Vue2의 업데이트된 버전과 비교하여 Vue3의 기능과 성능이 크게 향상되었습니다. 가장 주목할만한 점은 다중 탭을 지원한다는 것입니다. 이 기사에서는 Vue3에서 단일 페이지 다중 탭 기능을 구현하는 실제 프로세스를 살펴보겠습니다.

1. 사전 지식

Vue3의 멀티탭 기능을 심도있게 소개하기 전에 Vue3의 몇 가지 기본 개념을 이해해야 합니다.

1. 라우팅(route)

Routing은 가장 중요한 부분입니다. -end 브라우저의 URL과 페이지 간의 관계를 관리하는 개념입니다. Vue에서는 Vue Router를 통해 라우팅 점프를 구현할 수 있습니다.

2. 컴포넌트(Component)

Vue3는 대규모 애플리케이션을 컴포넌트로 하나씩 나누어 재사용할 수 있어 코드 재사용률이 향상됩니다.

3. 상태 관리

상태 관리는 애플리케이션에서 상태를 중앙 집중식으로 저장, 관리 및 조정하는 것을 의미합니다. Vue에서는 Vuex를 사용하여 상태 관리를 구현합니다.

2. 구현 과정

다음에서는 Vue3 및 Vue Router를 사용하여 단일 페이지 및 다중 탭 기능을 구현하는 방법을 소개합니다. 구체적인 구현은 다음 단계로 나눌 수 있습니다.

1. Vue Router 설치

Vue Router는 단일 페이지 애플리케이션의 라우팅 점프 및 관리를 쉽게 구현할 수 있는 Vue.js의 공식 라우팅 관리 라이브러리입니다. npm을 통해 Vue Router 설치:

npm install vue-router --save

2. 라우팅 구성

Vue3에서는 Vue2와 비교하여 라우팅 구성이 변경되었습니다. 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 } ]

그 중 createWebHashHistory()는 라우팅 점프, 라우트 구현을 위해 해시 값 사용을 지정합니다. 는 라우팅 구성 항목입니다. 아래와 같이 routes의 각 탭에 대한 경로를 정의합니다.

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

여기 라우팅에서는 home, about 및 contact us라는 세 개의 탭을 정의합니다.

3. 탭 구성 요소 만들기

다음으로 탭 구성 요소를 만들어야 합니다. Vue3에서는 Vue2에 비해 컴포넌트 정의가 변경되었습니다. 구성 요소를 정의하려면 defineComponent 메서드를 사용해야 합니다.

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

위 라우팅에 정의된 탭 페이지와 결합하면 render 함수에서 해당 구성 요소를 렌더링할 수 있습니다. .

4. 탭 페이지 추가

다음으로, 애플리케이션에 탭 페이지 기능을 추가해야 합니다. 배열을 사용하여 열린 탭을 저장할 수 있습니다. 각 배열 요소는 탭의 정보를 나타냅니다.

rrreee

그 중 title은 탭의 제목을 나타내고, name은 탭의 이름을 나타내며, path는 해당 탭의 라우팅 경로를 나타냅니다. 탭, isCurrent는 현재 탭이 선택되었는지 여부를 나타냅니다.

다음으로 탭 열기 기능을 구현해야 합니다. 메뉴에서 옵션을 클릭할 때 먼저 해당 경로가 탭 배열에 이미 존재하는지 확인해야 합니다. 이미 존재하는 경우 현재 탭을 선택한 상태로 설정하고, 그렇지 않은 경우 새 탭을 추가합니다. 🎜rrreee🎜 5. 탭을 닫습니다. 🎜🎜마지막으로 탭의 닫기 기능도 구현해야 합니다. 탭의 닫기 버튼을 클릭하면 배열에서 탭을 삭제하고 현재 탭을 이전 탭으로 설정해야 합니다. 🎜rrreee🎜 3. 요약 🎜🎜이 기사의 소개를 통해 Vue3 The에 대해 배웠습니다. 단일 페이지의 멀티탭 기능을 구현하기 위한 기본 아이디어와 구체적인 구현 프로세스입니다. Vue2와 비교하면 Vue3은 사용법이 일부 변경되어 실제 필요에 따라 조정해야 하지만 다중 탭을 지원한다는 장점은 여전히 ​​자명합니다. 웹 애플리케이션에서 다중 페이지 기능을 구현해야 하는 개발자에게 Vue3의 출현은 좋은 솔루션을 제공합니다. 🎜

위 내용은 vue3은 단일 페이지 다중 탭 페이지를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!