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

In this article Xiaobian for you to introduce in detail "ElementUI named view how to achieve complex top and left navigation bar", detailed content, clear steps, details handled properly, hope that this article "ElementUI named view how to achieve complex top and left navigation bar" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

The project directory is as follows:

1. Router configuration (router/index.js) is as follows:

Import Vue from 'vue'import Router from' vue-router'import TopNav from'@ / components/nav/topNav.vue'import LeftNav from'@ / components/nav/leftNav.vue'import Home from'@ / views/home.vue'import Dashboard from'@ / views/workbench/dashboard.vue'import MySettings from'@ / views/workbench/mySettings.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'Vue.use (Router) let router = new Router ({routes: [{path:'/' 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, children: [{path:'/ dashboard', name: 'home' / / name of the current route (text displayed in the navigation bar) components: {default: Dashboard, top: TopNav, aside: LeftNav}, leaf: true, / / there is only one node iconCls: 'iconfont icon-home', / / icon style class menuShow: true} {path:'/ mySet', components: {default: MySettings, top: TopNav, aside: 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 Task', 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:'/ enterprise/list', name: 'enterprise information', components: {default: EnterpriseList, top: TopNav, aside: LeftNav} Leaf: true, iconCls: 'el-icon-setting', menuShow: true}, {path:' / enterprise/detail', name: 'enterprise details', components: {default: EnterpriseDetail, top: TopNav, aside: LeftNav}, leaf: true IconCls: 'el-icon-setting', menuShow: false}, {path:' / enterprise/add', name: 'add Enterprise', components: {default: EnterpriseAdd, top: TopNav, aside: LeftNav}, leaf: true IconCls: 'el-icon-menu', menuShow: true}, {path:' / enterprise/validate', name: 'enterprise certification', components: {default: EnterpriseValidate, top: TopNav, aside: LeftNav}, leaf: true IconCls: 'el-icon-menu', menuShow: true}]}, {path:' / vehicleManager', type: 'enterprise', name:' vehicle', component: Home, redirect:'/ vehicle/list', menuShow: true, children: [{path:'/ vehicle/list' Name: 'vehicle information', components: {default: VehicleManage, top: TopNav, aside: LeftNav}, leaf: true, / / only one node iconCls: 'iconfont icon-home', / / icon style class menuShow: true}]} {path:'/ deptManager', type: 'enterprise', name:' dept', component: Home, redirect:'/ dept/list', menuShow: true, children: [{path:'/ dept/list', name: 'department information', components: {default: DeptManager, top: TopNav Aside: LeftNav}, leaf: true, / / there is only one node iconCls: 'iconfont icon-home', / / icon style class menuShow: true}]})

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).

2. Home.vue, where there are three views of name=top,aside,default. Top represents the top navigation, aside represents the left navigation, and the remaining default is the default view, representing the right content area.

Export default {name: 'home', data () {return {loading: false}

3. TopNav.vue is the code for the top navigation menu

Comprehensive vehicle management workbench enterprise management order management system management enterprise information Vehicle information organization structure {{nickname}} personal information change password exit Log in to import 'element-ui/lib/theme-chalk/display.css' Import {road} from'.. /.. / road.js' export default {data () {return {loading: false, companyName:', nickname:', defaultActiveIndex:'/', homeMenu: false, messageCount: 5}}, created () {road.$on ('setNickName', (text) = > {this.nickname = text) }); road.$on ('goto', (url) = > {if (url = = "/ login") {localStorage.removeItem (' access-user'); this.$router.push (url);}}); / / get data this.fetchNavData () after the component is created }, methods: {jumpTo (url) {this.$router.push (url); / / refresh with go}, handleSelect (index) {this.defaultActiveIndex = index;}, fetchNavData () {/ / initialize menu activator let cur_path = this.$route.path; / / get the current route let routers = this.$router.options.routes / / get routing object let nav_type = "", nav_name = ""; for (var 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) { nav_type = routers[i].type; nav_name = routers[i].name; break; } // 如果该菜单下还有子菜单 if(children[j].children) { let grandChildren = children[j].children; for(let z=0; z { //确认 localStorage.removeItem('access-user'); road.$emit('goto', '/login'); }).catch(() =>

{}), mounted () {let user = window.localStorage.getItem ('access-user'); if (user) {user = JSON.parse (user); this.nickname = user.nickname | |'; this.companyName = user.companyName | |'' }, watch: {'$route': function (to, from) {/ / execute / console.info when the route changes ("to.path:" + to.path); this.fetchNavData ();}

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 topNav.vue component can display the corresponding menu according to the type in $store, and the leftNav.vue component can also get the name value and display the corresponding left menu bar. In addition, the top and aside inside are named views, corresponding to the top navigation component and the left navigation component, respectively.

Add: the two states of topNavState and leftNavState are the essence, controlling the top navigation and the left navigation to display the corresponding module menu, respectively. These two states are set in the vuex configuration file store.js

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) const state = {collapsed: false, / / left navigation folding state topNavState: 'home', leftNavState:' dispatch'} export default new Vuex.Store ({state})

The store.js file is introduced in main.js:

Import store from'. / store.js'new Vue ({router, store, el:'# app', render: h = > h (App)})

4. LeftNav.vue left navigation bar (here the left menu bar has up to two levels of menus)

{{item.name}} {{term.name}} {{item.name}} export default {name: 'leftNav', data () {return {loading: false, collapsed: this.$store.state.collapsed }}, methods: {/ / collapse navigation bar collapse: function () {this.collapsed =! this.collapsed This.$store.state.collapsed = this.collapsed;}, / / the left navigation bar opens the submenu by default according to the current path (if it is currently a secondary menu, the parent submenu is open by default) defaultLeftNavOpened () {let cur_path = this.$route.path; / / get the current route let routers = this.$router.options.routes / / get the routing object let subMenuIndex ='', needOpenSubmenu = false; for (let I = 0; I < routers.length; iTunes +) {let children = routers [I] .children; if (children) {for (let j = 0; j < children.length; jacks +) {if (children.path = = cur_path) {break } / / if there is a submenu if (children.children & &! children.leaf) {let grandChildren = children.children; for (children0; z) under the menu.

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.