How to use Element-ui to implement Navigation menu in vue.js

This article mainly introduces "how vue.js uses Element-ui to achieve navigation menus". In daily operation, I believe many people have doubts about how to use vue.js to achieve navigation menus in Element-ui. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use vue.js to achieve navigation menus in Element-ui". Next, please follow the editor to study!

Let's show the picture first.

Let me talk about the general implementation idea first, or the following code snippet will be confused.

The left and right parts are circled, and the element copy on the left can be realized.

On the right are the child components of the jump.

First, create the vue file of the navigation menu, but this file only introduces components, which uses the Container layout container to implement the left and right parts. The components of the navigation menu are placed in the el-aside tag on the left, and the route jump is written in the el-main tag on the right.

Navigation menu file I named Elnav.vue

Import navmenu from'. / navmenu'export default {data () {return {}}, components: {navmenu}}

It mainly introduces navmenu components (navmenu components are the styles in elemet)

In navmenu.vue

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

Navigation one group one option 1 option 2 option 3 Option 4 option 1 export default {methods: {handleOpen (key KeyPath) {console.log (key, keyPath) }, handleClose (key, keyPath) {console.log (key, keyPath);}, mounted () {console.log (this.$route);}}

Then there 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 contents of the one.vue and other vue files on the right, you can write them yourself.

At this point, the study on "how to use vue.js to implement navigation menus in Element-ui" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!