Satu contoh menerangkan cara Vue melaksanakan fungsi tab di sebelah kanan bar navigasi kiri

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk mencipta aplikasi web yang berkuasa. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan halaman tab di sebelah kanan bar navigasi kiri.

Pertama, kita perlu mencipta tika Vue supaya kita boleh menggunakan komponen dan arahan Vue. Kita boleh mencipta projek Vue baharu dengan menggunakan Vue-cli.

Seterusnya, kita perlu mempertimbangkan cara melaksanakan bar navigasi kiri. Kita boleh menggunakan penghala Vue dan penghalaan bersarang untuk mencapai fungsi ini. Sangat mudah untuk mencipta penghala dan komponen induk untuk menempatkan laluan anak. Berikut ialah contoh kod:

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

Dalam kod di atas, kami telah mencipta penghala dan menyediakan dua laluan. Laluan pertama akan sepadan dengan laluan akar dan memaparkan komponen Laman Utama, dan laluan kedua akan sepadan dengan laluan /papan pemuka dan memaparkan komponen Papan Pemuka. Komponen Papan Pemuka mempunyai dua subkomponen: Peti Masuk dan Mel.

Langkah seterusnya ialah memikirkan cara untuk memaparkan tab di sebelah kanan. Kita boleh mencipta komponen yang akan bertindak sebagai bekas untuk setiap tab. Setiap tab akan memaparkan komponen yang sepadan. Berikut ialah contoh kod:

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

Dalam kod di atas, kami telah mencipta komponen yang dipanggil "Tab". Ia menerima sifat yang dipanggil "nilai" yang mengandungi maklumat tentang tab semasa. Ia akan mengemas kini sifat "activeTab" apabila tab berubah. Kami juga mentakrifkan dua kaedah addTab dan removeTab supaya kami boleh menambah dan mengalih keluar tab secara dinamik.

Sekarang kita mempunyai penghalaan dan komponen tab, kita perlu menggabungkannya. Kami boleh menggunakan kod berikut dalam komponen Papan Pemuka:

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

Dalam kod di atas, kami mengimport komponen Tab yang dibuat sebelum ini dan menggunakannya dalam komponen Papan Pemuka. Komponen tab kini akan muncul di sebelah kanan.

Akhir sekali, kita perlu berurusan dengan sejarah penyemak imbas. Apabila kami menukar tab, kami mahu URL juga berubah. Ini akan membolehkan pengguna menavigasi tab menggunakan butang hadapan dan belakang penyemak imbas. Kami boleh menggunakan objek $route Vue untuk mengakses URL semasa dan mengemas kini URL apabila tab berubah. Berikut ialah contoh kod:

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

Dalam kod di atas, kami telah menentukan kaedah yang dipanggil updateUrl yang akan mengemas kini URL. Kami menggunakan kaedah "tolak" untuk mengemas kini URL. Kami juga telah mengemas kini tajuk dokumen supaya apabila menukar tab tajuk juga dikemas kini.

Ringkasan

Vue ialah rangka kerja JavaScript yang popular yang boleh digunakan untuk mencipta aplikasi web yang berkuasa. Dalam artikel ini, kami memperkenalkan cara menggunakan Vue untuk melaksanakan halaman tab di sebelah kanan bar navigasi kiri. Kami menggunakan penghala Vue dan penghalaan bersarang untuk melaksanakan bar navigasi kiri, dan menggunakan komponen dan arahan Vue untuk melaksanakan halaman tab. Kami juga melihat bagaimana sejarah penyemak imbas diurus. Harap artikel ini dapat membantu anda memahami Vue dan pembangunan aplikasi web.

Atas ialah kandungan terperinci Satu contoh menerangkan cara Vue melaksanakan fungsi tab di sebelah kanan bar navigasi kiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!