Vue.js uses Element-ui to implement the navigation menu

This article shares the specific code for implementing the navigation menu in vue.js using Element-ui for your reference. The specific content is as follows

The reason for writing this is that when I wrote this function, the element only had an effect, but the function was not realized, and I was confused at the time.

Let's put the picture first

I will first explain the general implementation idea, otherwise the following code snippet will be confusing. The circled left and right parts are the elements that can be copied, and the right parts are the subcomponents that jump.

First, create a vue file for the navigation menu. However, this file only imports components. The Container layout container is used to implement the left and right parts. The components of the navigation menu are placed in the el-aside tag on the left, and <router-view></router-view> is written in the el-main tag on the right to implement the route jump.

I named the navigation menu file Elnav.vue

<template>
    <div class="app">
        <el-container>
        <el-aside>
            <navmenu></navmenu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
        </el-container>
    </div>
</template>
<script>
import navmenu from './navmenu'
export default {
    data() {
        return {
            
        }
    },
    components:{
        navmenu
    }
}
</script>
<style scoped>

</style>

It mainly introduces the navmenu component (the navmenu component is the style in elemet)

navmenu.vue

Note the setting of default-active="$route.path" and the index value of the component jump (option 1/2)

<template>
    <div>
        <el-row>
            <el-col>
                
                <el-menu
                    default-active="$route.path"
                    router
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>Navigation 1</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">Group 1</template>
                            <el-menu-item index="/Elnav/one">Option 1</el-menu-item>
                            <el-menu-item index="/Elnav/two">Option 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="Group 2">
                            <el-menu-item index="1-3">Option 3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">Option 4</template>
                            <el-menu-item index="1-4-1">Option 1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {
    console.log(this.$route);
  }
};
</script>
<style>
</style>

Next is the configuration of the route

{
    path: "/Elnav",
    name: "Elnav",   
    component: () =>
      import("../components/Elnav.vue"),
      children:[
        {
          path: "/Elnav/one",
          name: "one",   
          component: () =>
            import("../components/one.vue")
        },
        {
          path: "/Elnav/two",
          name: "two",   
          component: () =>
            import("../components/two.vue")
        }
      ]
  }

As for the content of one.vue and other vue files on the right, just write them yourself

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Sample code for implementing the history tag menu using vue+elementui+vuex+sessionStorage
Vue uses element-ui to implement menu navigation
Vue+Element UI realizes the encapsulation of drop-down menu
Vue+element-ui adds a custom right-click menu method example
Vue + Element UI implements the menu function implementation code of the permission management system

<<: Basic usage of find_in_set function in mysql

>>: How to install mysql in docker