Home > Article > Web Front-end > How to use Vue and Element-UI to implement multi-level menu navigation function

How to use Vue and Element-UI to implement multi-level menu navigation function

王林Original: 2023-07-22 16:33:142295browse

Introduction:
As the complexity of modern web applications increases, multi-level menu navigation function has become essential part. As a popular JavaScript framework, Vue is widely used in front-end development for its simplicity, ease of use and flexibility. Element-UI is a set of UI component libraries based on Vue, which provides a rich set of components and styles and is suitable for building modern web interfaces. This article will introduce how to use Vue and Element-UI to implement multi-level menu navigation functions, and provide code examples.

HTML structure:
First, we need to create a container element in the HTML file to host the Vue application. Then, create a 0335875a31945e6c7d307ca638979f92 component in the container to display menu navigation. The code example is as follows:

<div id="app">
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
    <el-submenu index="1">
      <template slot="title">一级菜单</template>
      <el-menu-item index="1-1">二级菜单-1</el-menu-item>
      <el-menu-item index="1-2">二级菜单-2</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">一级菜单</template>
      <el-menu-item index="2-1">二级菜单-1</el-menu-item>
      <el-menu-item index="2-2">二级菜单-2</el-menu-item>
    </el-submenu>
  </el-menu>
</div>

Vue script:
Next, we need to write a Vue script to control the behavior of menu navigation. First, we need to import Vue and Element-UI and create a Vue instance. Then, define a data attribute in the instance to store the index of the currently selected menu item. Finally, define a method handleMenuSelect in the instance to handle the selection event of the menu item. The code sample is as follows:

// 导入Vue和Element-UI
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    activeIndex: '1-1'   // 当前选中的菜单项的索引
  },
  methods: {
    handleMenuSelect(index) {
      console.log('选中了菜单项', index);
      this.activeIndex = index;   // 更新当前选中的菜单项的索引
    }
  }
});

Complete sample code:
The following is a complete sample code using Vue and Element-UI to implement multi-level menu navigation function:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多级菜单导航</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
      <el-submenu index="1">
        <template slot="title">一级菜单</template>
        <el-menu-item index="1-1">二级菜单-1</el-menu-item>
        <el-menu-item index="1-2">二级菜单-2</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">一级菜单</template>
        <el-menu-item index="2-1">二级菜单-1</el-menu-item>
        <el-menu-item index="2-2">二级菜单-2</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
  <script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        activeIndex: '1-1'   // 当前选中的菜单项的索引
      },
      methods: {
        handleMenuSelect(index) {
          console.log('选中了菜单项', index);
          this.activeIndex = index;   // 更新当前选中的菜单项的索引
        }
      }
    });
  </script>
</body>
</html>

Summary:
By using Vue and Element-UI, we can easily implement multi-level menu navigation functionality. This article describes how to implement it through HTML structure and Vue scripts, and provides complete sample code. I hope this article can help you understand and apply the multi-level menu navigation function.

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

JavaScript html 事件 ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How the keep-alive component implements page caching in vueNext article：How the keep-alive component implements page caching in vue

See more

How to use Vue and Element-UI to implement multi-level menu navigation function

Related articles