Vue2 + el-menu Implementation of Route jump and the current item Setting Method Instance, vue2el-menu

Vue2 + el-menu Implementation of Route jump and the current item Setting Method Instance, vue2el-menu

What is Vue. js?

Vue. js (pronunciation/vju example/, similar to view) is a progressive framework for building user interfaces. Different from other heavyweight frameworks, Vue adopts a bottom-up and incremental development design. The core Vue Library only focuses on the view layer. It is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when used in conjunction with a single file component and a Library Supported by the Vue ecosystem, Vue can also provide drivers for complex single-page applications.

Now, this article describes how to implement route jump and set the current item through vue2 + el-menu. The specific content is as follows:

<Span style = "font-size: 24px;" deep = "5"> <el-menu router: default-active = "$ route. path "class =" el-menu-vertical-demo "@ open =" handleOpen "@ close =" handleClose "theme =" dark "> <el-submenu index =" 1"> <template slot = "title"> <I class = "el-icon-location"> </I> <span> User Information </span> </template> <el -menu-item-group> <el-menu-item index = "/user/account"> account information </el-menu-item> <el-menu-item index = "/user/password"> Change password </el-menu-item> </el-submenu> <el-submenu index = "2"> <template slot = "title"> <I class = "el-icon-location"> </I> <span> Company Information </span> </template> <el-menu-item-group> <el-menu-item index = "/company/userManager"> User management </el-menu-item> <el-menu-item index = "/company/editUser"> Add /edit user </el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </span>

1. to achieve route jump, you must first add the router attribute on the el-menu label, then, you only need to set the url for the index attribute in each el-menu-item label to click el-menu-item to achieve route jump.

2. Bind the current item to the el-menu tab:default-active="$route.path"Note that the attribute is bound. Do not forget to add ":". When $ route. path is equal to the index attribute value in the el-menu-item label, this item is the current item.

Summary

The above section describes the vue2 + el-menu method used to implement route jump and set the current item. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!