Vue가 왼쪽 탐색 모음 오른쪽에 탭 기능을 구현하는 방법을 설명하는 예입니다.

Vue는 강력한 웹 애플리케이션을 만드는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. 이번 글에서는 Vue를 이용하여 왼쪽 네비게이션 바 오른쪽에 탭 페이지를 구현하는 방법을 소개하겠습니다.

먼저 Vue의 구성 요소와 지시문을 사용할 수 있도록 Vue 인스턴스를 만들어야 합니다. Vue-cli를 사용하여 새로운 Vue 프로젝트를 생성할 수 있습니다.

다음으로 왼쪽 네비게이션 바를 구현하는 방법을 고려해야 합니다. 이 기능을 달성하기 위해 Vue의 라우터와 중첩 라우팅을 사용할 수 있습니다. 하위 경로를 중첩할 라우터와 상위 구성 요소를 만드는 것은 매우 쉽습니다. 다음은 샘플 코드입니다.

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

위 코드에서는 라우터를 생성하고 두 개의 경로를 설정했습니다. 첫 번째 경로는 루트 경로와 일치하고 홈 구성 요소를 표시하며, 두 번째 경로는 /dashboard 경로와 일치하고 대시보드 구성 요소를 표시합니다. 대시보드 구성 요소에는 받은 편지함과 메일이라는 두 가지 하위 구성 요소가 있습니다.

다음 단계는 탭을 오른쪽에 어떻게 표시할지 고민하는 것입니다. 각 탭의 컨테이너 역할을 할 구성 요소를 만들 수 있습니다. 각 탭은 해당 구성 요소를 렌더링합니다. 다음은 샘플 코드입니다.

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

위 코드에서는 "Tabs"라는 구성 요소를 만들었습니다. 현재 탭에 대한 정보가 포함된 "value"라는 속성을 허용합니다. 탭이 변경되면 "activeTab" 속성이 업데이트됩니다. 또한 동적으로 탭을 추가하고 제거할 수 있도록 addTab 및 RemoveTab 두 가지 메소드를 정의합니다.

이제 라우팅 및 탭 구성 요소가 있으므로 병합해야 합니다. 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>

위 코드에서는 이전에 만든 Tabs 구성 요소를 가져와 Dashboard 구성 요소에서 사용했습니다. 이제 탭 구성 요소가 오른쪽에 나타납니다.

마지막으로 브라우저 기록을 처리해야 합니다. 탭을 변경하면 URL도 변경되기를 원합니다. 이를 통해 사용자는 브라우저의 앞으로 및 뒤로 버튼을 사용하여 탭을 탐색할 수 있습니다. Vue의 $route 객체를 사용하여 현재 URL에 액세스하고 탭이 변경되면 URL을 업데이트할 수 있습니다. 다음은 샘플 코드입니다.

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

위 코드에서는 URL을 업데이트하는 updateUrl이라는 메서드를 정의했습니다. 우리는 URL을 업데이트하기 위해 "push" 메소드를 사용합니다. 또한 탭을 변경할 때 제목도 업데이트되도록 문서 제목을 업데이트했습니다.

요약

Vue는 강력한 웹 애플리케이션을 만드는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. 이번 글에서는 Vue를 이용하여 왼쪽 네비게이션 바 오른쪽에 탭 페이지를 구현하는 방법을 소개합니다. 우리는 Vue의 라우터와 중첩 라우팅을 사용하여 왼쪽 탐색 모음을 구현했으며 Vue 구성 요소와 지시문을 사용하여 탭 페이지를 구현했습니다. 또한 브라우저 기록이 관리되는 방식도 살펴보았습니다. 이 글이 Vue와 웹 애플리케이션 개발을 이해하는 데 도움이 되기를 바랍니다.

위 내용은 Vue가 왼쪽 탐색 모음 오른쪽에 탭 기능을 구현하는 방법을 설명하는 예입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!