An example explains how Vue implements the tab function on the right side of the left navigation bar-Front-end Q&A-php.cn

An example explains how Vue implements the tab function on the right side of the left navigation bar

PHPz

Release： 2023-04-11 15:17:41

Original

2327 people have browsed it

Vue is a popular JavaScript framework that can be used to create powerful web applications. In this article, we will introduce how to use Vue to implement the tab page on the right side of the left navigation bar.

First, we need to create a Vue instance so that we can use Vue’s components and directives. We can create a new Vue project by using Vue-cli.

Next, we need to consider how to implement the left navigation bar. We can use Vue's router and nested routing to achieve this function. It's very easy to create a router and parent component in which to nest child routes. Here is a sample code:

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

Copy after login

In the above code, we have created a router and set up two routes. The first route will match the root path and display the Home component, and the second route will match the /dashboard path and display the Dashboard component. The Dashboard component has two subcomponents: Inbox and Mail.

The next step is to think about how to display tabs on the right side. We can create a component that will act as a container for each tab. Each tab will render the corresponding component. The following is a sample code:

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

Copy after login

In the above code, we have created a component named "Tabs". It accepts a property called "value" which contains information about the current tab. It will update the "activeTab" property when the tab changes. We also define two methods addTab and removeTab so that we can dynamically add and remove tabs.

Now that we have the routing and tab components, we need to merge them. We can use the following code in the Dashboard component:

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

Copy after login

In the above code, we imported the Tabs component created earlier and used it in the Dashboard component. The tab component will now appear on the right.

Finally, we need to deal with browser history. When we change the tab, we want the URL to change too. This will enable users to navigate tabs using the browser's forward and back buttons. We can use Vue's $route object to access the current URL and update the URL when the tab changes. Here is a sample code:

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

Copy after login

In the above code, we have defined a method called updateUrl which will update the URL. We use the "push" method to update the URL. We've also updated the document title so that when changing tabs the title also updates.

Summary

Vue is a popular JavaScript framework that can be used to create powerful web applications. In this article, we introduce how to use Vue to implement the tab page on the right side of the left navigation bar. We used Vue's router and nested routing to implement the left navigation bar, and used Vue components and directives to implement the tab page. We also looked at how browser history is managed. Hope this article can help you understand Vue and web application development.

The above is the detailed content of An example explains how Vue implements the tab function on the right side of the left navigation bar. For more information, please follow other related articles on the PHP Chinese website!