Vue が左側のナビゲーション バーの右側にタブ機能を実装する方法を例で説明します。

Vue は、強力な Web アプリケーションの作成に使用できる人気のある 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
    }
  ]
}
]
})

上記のコードでは、ルーターを作成し、2 つのルートを設定しました。最初のルートはルート パスと一致してホーム コンポーネントを表示し、2 番目のルートは /dashboard パスと一致してダッシュボード コンポーネントを表示します。ダッシュボード コンポーネントには、受信トレイとメールという 2 つのサブコンポーネントがあります。

次は右側にタブを表示する方法を考えます。各タブのコンテナとして機能するコンポーネントを作成できます。各タブは、対応するコンポーネントをレンダリングします。以下はサンプル コードです:

<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」プロパティが更新されます。また、タブを動的に追加および削除できるように、2 つのメソッド addTab および RemoveTab も定義します。

ルーティング コンポーネントとタブ コンポーネントができたので、それらをマージする必要があります。ダッシュボード コンポーネントでは次のコードを使用できます。

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

上記のコードでは、前に作成したタブ コンポーネントをインポートし、それをダッシュ​​ボード コンポーネントで使用しました。タブコンポーネントが右側に表示されます。

最後に、ブラウザの履歴を扱う必要があります。タブを変更すると、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 の更新には「プッシュ」メソッドを使用します。ドキュメントのタイトルも更新され、タブを変更するとタイトルも更新されるようになりました。

概要

Vue は、強力な Web アプリケーションの作成に使用できる人気のある JavaScript フレームワークです。この記事では、Vueを使用して左側のナビゲーションバーの右側にタブページを実装する方法を紹介します。 Vue のルーターとネストされたルーティングを使用して左側のナビゲーション バーを実装し、Vue コンポーネントとディレクティブを使用してタブ ページを実装しました。ブラウザの履歴がどのように管理されるかについても調べました。この記事が Vue と Web アプリケーション開発の理解に役立つことを願っています。

以上がVue が左側のナビゲーション バーの右側にタブ機能を実装する方法を例で説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。