How to use vue and Element-plus to implement multi-level menus and navigation bars

How to use Vue and Element Plus to implement multi-level menus and navigation bars

Vue is a very popular JavaScript framework that is widely used to build user interfaces. Element Plus is a UI library based on Vue, which provides a rich set of UI components to easily create user interfaces. In this article, we will explore how to use Vue and Element Plus to implement multi-level menus and navigation bars so that users can easily browse different pages of the website.

First, we need to create a Vue project and install Element Plus. We can use Vue's scaffolding tool to create a new project:

vue create vue-menu-navigation
cd vue-menu-navigation

Install Element Plus:

npm install element-plus --save

Next, we need to create a component that contains a multi-level menu and navigation bar. We can use the Menu and Breadcrumb components provided by Element Plus to achieve this function. In Vue's single file component, we can use these components as follows:

<template>
  <div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template #title>产品</template>
        <el-menu-item-group>
          <template #title>手机</template>
          <el-menu-item index="2-1">iPhone</el-menu-item>
          <el-menu-item index="2-2">华为</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title>电视</template>
          <el-menu-item index="2-3">小米</el-menu-item>
          <el-menu-item index="2-4">创维</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="3">关于</el-menu-item>
    </el-menu>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
        {{ item }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      breadcrumb: ['首页'],
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;

      switch (index) {
        case '1':
          this.breadcrumb = ['首页'];
          break;
        case '2-1':
          this.breadcrumb = ['产品', '手机', 'iPhone'];
          break;
        case '2-2':
          this.breadcrumb = ['产品', '手机', '华为'];
          break;
        case '2-3':
          this.breadcrumb = ['产品', '电视', '小米'];
          break;
        case '2-4':
          this.breadcrumb = ['产品', '电视', '创维'];
          break;
        case '3':
          this.breadcrumb = ['关于'];
          break;
      }
    },
  },
};
</script>

In the above code, we use the el-menu component to create a multi-level menu, represented by the el-menu-item component Menu item, the el-submenu component represents a menu item containing a submenu. When the user selects a menu item, we update the value of the activeIndex variable and update the content of the breadcrumb bar based on the value of activeIndex.

In the Vue component, we can define data through the data attribute, and define methods for handling menu selection events in the methods attribute. In the handleSelect method, we update the activeIndex and breadcrumb data based on the index value of the selected menu item.

Finally, use this component in our Vue instance:

<template>
  <div>
    <navigation></navigation>
    <router-view></router-view>
  </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
export default {
  components: {
    Navigation,
  },
};
</script>

By introducing and using the Navigation component, we add a multi-level menu and navigation bar to our application. At the same time, we also added a router-view component to navigate between different pages.

So far, we have completed the work of implementing multi-level menus and navigation bars using Vue and Element Plus. Through careful layout and good interaction, we can provide users with a better website navigation experience. Of course, the above is just a simple example, you can customize and expand it according to your needs.

I hope this article is helpful to you, and happy coding!

The above is the detailed content of How to use vue and Element-plus to implement multi-level menus and navigation bars. For more information, please follow other related articles on the PHP Chinese website!