The login page is displayed. After the login succeeds, the table page is displayed.

Home. Vue components

The common component of all pages (except 404) after the user of this component logs in successfully

Layui layout

Element-cn.elem. IO /#/ zh-cn /com Code layout structure for this page

Github.com/sunseekers/…

Expansion and collapse of the sidebar

Effect after folding:

An collapsed parameter is required, with an initial value of false. Then through the ternary operator, dynamic control class value; Through the {{collapsed? ‘:sysName}} Control log name Controls the value of collapsed by clicking on an element. (click. Prevent = “collapse”)?? Why are there no native click events here? Collapse :function(){this.collapsed=! this.collapsed; }, in this example, collapses and collapses are created through the collapsed parameter, but v-show cannot be used, which conceals elements and changes the width of the original navigation menu when collapsed and automatically adds width styles to inline styles. If I replace it with v minus if, I don’t have that problem.

Expand content as the mouse moves over

Use the drapdown (dropdown menu) element- cn.elem. IO /#/ zh-cn /com… To log out, perform the following operations:

The sidebar section:

Sidebar rendering

When a

<template v-for="(item,index) in $router.options.routes" v-if=! "" item.hidden">
	<el-submenu :index="index+''" v-if=! "" item.leaf">
		<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
		<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if=! "" child.hidden">{{child.name}}</el-menu-item>
	</el-submenu>
	<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
Copy the code

The sidebar effect is achieved by traversing the route (which I think is a bad idea when there are too many other components), and the route component that does not need to generate the sidebar navigation is achieved by adding a property (hidden: true) and a conditional statement (V-if =”! Item. hidden”), determine that when the route attribute is not hidden, render the corresponding component to the menu bar. Some menus do not have Mosaic submenus, and some contain submenus. Therefore, it is necessary to determine which menu style will be generated by the condition (V-if =”! Item. leaf”) to check whether it is the last node. Use the :index attribute to determine the route to the corresponding menu (:index= “child.path”).

Pack up the

<li v-for="(item,index) in $router.options.routes" v-if=! "" item.hidden" class="el-submenu item">
	<template v-if=! "" item.leaf">
		<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
			<i :class="item.iconCls"></i>
		</div>
		<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
			<li v-for="child in item.children" v-if=! "" child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path? 'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
		</ul>
	</template>
	<template v-else>
		<li class="el-submenu">
			<div class="el-submenu__title el-menu-item" style="padding-left: 20px; height: 56px; line-height: 56px; padding: 0 20px;" :class="$route.path==item.children[0].path? 'is-active':''" @click="$router.push(item.children[0].path)">
				<i :class="item.iconCls"></i>
			</div>
		</li>
	</template>
</li>
Copy the code

Default -active=”$route.path” This code expands the sidebar options of the corresponding route page and selects the currently selected route. Not only the initial loading of the page, but also what happens when the menu collapses and expands.