Shulou(Shulou.com)06/01 Report--

This article mainly introduces the ElementUI complex top and left navigation bar how to achieve the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this ElementUI complex top and left navigation bar how to achieve the article will have a harvest, let's take a look.

Description: as shown

The project path is shown in the following figure:

Code implementation:

First add two states to the store.js:

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) const state = {topNavState: 'home', leftNavState:' home'} export default new Vuex.Store ({state})

App.vue content:

Export default {name: 'app'}

Main.js Code:

Import Vue from 'vue'import App from'. / App'import router from'. / router'import ElementUI from 'element-ui'import store from'. / store.js'import 'element-ui/lib/theme-chalk/index.css'import' @ / assets/iconfont.css'import'@ / assets/css/style.css'Vue.config.productionTip = falseVue.use (ElementUI) new Vue ({router, store, el:'# app', render: h = > h (App)})

The router/index.js file declares the route:

Among them: itinerary, task and address book belong to the home page (topNavState= "home"); enterprise information, vehicle information and department information all belong to the enterprise section (topNavState= "enterprise")

Import Vue from 'vue'import Router from' vue-router'import LeftNav from'@ / components/nav/leftNav.vue'import Home from'@ / views/home.vue'import Dashboard from'@ / views/workbench/dashboard.vue'import Mission from'@ / views/workbench/mission/mission.vue'import Plan from'@ / views/workbench/plan.vue'import Maillist from'@ / views/workbench/maillist.vue'import EnterpriseList from'@ / views/enterprise/index.vue'import EnterpriseAdd from'@ / views/ Enterprise/add.vue'import EnterpriseDetail from'@ / views/enterprise/detail.vue'import EnterpriseValidate from'@ / views/enterprise/validate.vue'import VehicleManage from'@ / views/vehicle/index.vue'import DeptManager from'@ / views/dept/index.vue'import NotFound from'@ / components/404.vue'// lazy loading mode Load the corresponding component const Login = resolve = > require (['@ / views/login'], resolve) Vue.use (Router) let router = new Router ({routes: [{path:'/ login', type: 'login', component: Login}, {path:' *', component: NotFound}, {path:'/') when the route is accessed Type: 'home', / / distinguish different modules according to type (top navigation) name:' home', / / distinguish different sub-modules according to name (left navigation) redirect:'/ dashboard', component: Home, menuShow: true, children: [{path:'/ dashboard', component: LeftNav, name: 'dashboard' / / name leaf: true of the current route, / / only one node iconCls: 'iconfont icon-home', / / icon style class menuShow: true, children: [{path:' / dashboard', component: Dashboard, name: 'home', menuShow: true}]}, {path:'/ mySet' Component: LeftNav, name:'my Settings', iconCls: 'el-icon-menu', menuShow: true, children: [{path:' / mySet/plan', component: Plan, name: 'itinerary', menuShow: true}, {path:'/ mySet/mission', component: Mission, name:'my tasks', menuShow: true} {path:'/ mySet/maillist', component: Maillist, name: 'address Book, menuShow: true}]}}, {path:' / enterpriseManager', type: 'enterprise', name:' enterprise', component: Home, redirect:'/ enterprise/list', menuShow: true Children: [{path:'/ enterpriseList', component: LeftNav, name: 'enterpriseList', leaf: true, / / only one node iconCls:' iconfont icon-home', / / icon style class menuShow: true, children: [{path:'/ enterprise/list', component: EnterpriseList Name: 'enterprise list', menuShow: true}, {path:'/ enterprise/detail', component: EnterpriseDetail, name: 'enterprise details', menuShow: false}]}, {path:'/ enterpriseAdd', component: LeftNav, name: 'enterpriseAdd', leaf: true / / there is only one node iconCls: 'el-icon-menu', menuShow: true, children: [{path:' / enterprise/add', component: EnterpriseAdd, name: 'enterprise add', menuShow: true}]}, {path:'/ enterpriseValidate', component: LeftNav, name: 'enterpriseValidate' Leaf: true, / / there is only one node iconCls: 'el-icon-menu', menuShow: true, children: [{path:' / enterprise/validate', component: EnterpriseValidate, name: 'enterprise certification', menuShow: true}]}}, {path:'/ vehicleManager', type: 'enterprise' Name: 'vehicle', component: Home, redirect:' / vehicle/list', menuShow: true, children: [{path:'/ vehicleList', component: LeftNav, name: 'vehicleList', leaf: true, / / only one node iconCls:' iconfont icon-home' / / Icon style class menuShow: true, children: [{path:'/ vehicle/list', component: VehicleManage, name: 'vehicle Information', menuShow: true}]}}, {path:'/ deptManager', type: 'enterprise', name:' dept', component: Home Redirect:'/ dept/list', menuShow: true, children: [{path:'/ deptList', component: LeftNav, name: 'deptList', leaf: true, / / only one node iconCls:' iconfont icon-home', / / icon style class menuShow: true Children: [{path:'/ dept/list', component: DeptManager, name: 'department information', menuShow: true}]}]}) Router.beforeEach ((to, from Next) = > {/ / console.log ('to:' + to.path) if (to.path.startsWith (' / login')) {window.localStorage.removeItem ('access-user') next ()} else if (to.path.startsWith (' / register')) {window.localStorage.removeItem ('access-user') next ()} else {let user = JSON.parse (window.localStorage.getItem (' access-user')) If (! user) {next ({path:'/ login'})} else {next ()}}) Export default router

Special note:

Here, the routing object router is set to a maximum of three levels, and the first-level route mainly corresponds to the top navigation and other routes without child pages. The second-and third-level routes correspond to the first-and second-level menus of the left navigation (for example, the third-level route corresponds to the second-level menu of the left navigation), and the second-level route sets the leaf attribute. A value of true indicates that there is no submenu under the route (if a page under that route does not appear in the left navigation, no operator menu).

The left navigation menu loads the code in the leftNav.vue file:

{{item.name}} {{term.name}} {{item.children [0] .name}} Export default {name: 'leftNav' Data () {return {collapsed: false}}, methods: {/ / collapse navigation bar collapse: function () {this.collapsed =! this.collapsed }, / / the left navigation bar opens the submenu by default according to the current path (if the current route is three levels, the parent submenu opens by default) defaultLeftNavOpened () {let cur_path = this.$route.path; / / get the current route let routers = this.$router.options.routes; / / get the route object let subMenuIndex = 0, needOpenSubmenu = false; for (let I = 0 I

< routers.length; i++) { let children = routers[i].children; if(children){ for (let j = 0; j < children.length; j++) { if (children[j].path === cur_path) { break; } // 如果该菜单下有子菜单(个数>

1 and leaf is set to false before there is a drop-down submenu) if (children.children & &! children.leaf) {let grandChildren = children.children; for (children0; z {});}}, mounted () {let user = localStorage.getItem ('access-user') If (user) {user = JSON.parse (user); this.nickname = user.nickname | |';}}, watch: {'$route': 'fetchNavData' / / change the navigation menu activation when the value of the listener route changes}}

Note that fetchNavData () this method is mainly based on the current jump route, to find the corresponding type (corresponding to the classification of the top navigation bar) and name (corresponding to the classification of the left navigation bar), and then save type and name to $store, so that the navigation at the top can display the corresponding menu according to the type in $store, and the navigation on the left can also get this name value and display the corresponding left menu bar.

There is a deficiency in the code of the left navigation bar (leftNav.vue) written earlier-when the current open page is a three-level route (that is, the second-level menu of the left navigation), the current page is refreshed and the first-level menu to which the current route belongs is not opened by default.

The solution has been modified to add the defaultLeftNavOpened () method to leftNav.vue. For more information, you can refer back to the code of leftNav.vue.

ElementUI+ named views implement complex top and left navigation bars

Add:

Today, a careful netizen found a small problem:

When the left navigation is currently active other than the first menu, switch to the other top navigation and then switch back, there will be two active menus.

Fix: the el-menu tag lacks the default-active attribute setting, just add it.

This is the end of the article on "how to implement the complex top and left navigation bar of ElementUI". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to achieve the complex top and left navigation bar of ElementUI". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.