The layout of the left navigation bar of element-ui is implemented, the effect is as follows
Components involved:
App.vue
Router.js
layout.vue: nav.vue (left navigation area, containing loop widget asideBarItem.vue), AppMain.vue (right main content area)
The project structure is as follows:
?
1. App.vue, controls the rendering of the page through router routing, very simple, a router-view
<template>
<div id="app">
<keep-alive> // Cache components to improve running performance
<router-view></router-view>
</keep-alive>
</div>
</template>
2. router.js (key point), layout will be introduced here as a template component. The following example components can be added by yourself.
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout/layout.vue'
import AppMain from '@/layout/components/AppMain.vue' // Display area component on the right
Vue.use(Router)
export default new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'base',
redirect: '/about',
component: Layout, // Main template component
meta: { // Render the breadcrumb title of the right area
title: 'Public Component',
levelList: []
},
children: [
{
path: '/about',
name: 'baseAbout',
component: () => import('./views/About.vue'), // Lazy loading of components to improve running performance
meta: {
title: 'About Us',
levelList: []
}
}
]
},
{
path: '/user',
name: 'User_Nav',
component: Layout,
meta: {
title: 'User Navigation',
levelList: []
},
children: [
{
path: '/user/info',
name: 'userInfo',
meta: {
title: 'User Information',
levelList: []
},
component: AppMain, // Right area template component
children: [
{
path: '/user/info/userCenter',
name: 'userCenter',
meta: {
title: 'Personal Center',
levelList: []
},
component: AppMain,
children: [
{
path: '/user/info/userCenter/userLog',
name: 'orderList',
meta: {
title: 'Personal Diary',
levelList: []
},
component: () => import('@/views/user.vue'),
},
]
},
{
path: '/user/info/order-list',
name: 'orderList',
meta: {
title: 'Order List',
levelList: []
},
component: () => import('@/views/orderList.vue')
},
{
path: '/user/info/address-list',
name: 'addressList',
meta: {
title: 'Address List',
levelList: []
},
component: () => import('@/views/addressList.vue')
}
]
},
{
path: '/user/login',
name: 'baseAboutLogin',
meta: {
title: 'Login component',
levelList: []
},
component: () => import('./views/login.vue')
}
]
}
]
})
3. layerout folder
3-1. Main file layout.vue
<template>
<div class="app-contain">
<!-- Left navigation -->
<el-container class="index-container">
<el-aside class="layout-contant">
<Nav></Nav>
</el-aside>
<!-- Breadcrumbs simplify learning, temporarily blocked -->
<!-- <el-main>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="item in levelList" :key="item.path">
<a :href="item.path" v-if="item.parent">{<!-- -->{item.meta.title}}</a>
<span v-else>{<!-- -->{item.meta.title}}</span>
</el-breadcrumb-item>
</el-breadcrumb> -->
<!-- Right display area -->
<App-main></App-main>
</el-main>
</el-container>
</div>
</template>
3-2. nav.vue, which introduces the asideBarItem.vue component
<template>
<div class="nav-contain">
<el-menu
router
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<AsideBarItem v-for="router in routers"
:key="router.path"
:router="router"
>
</AsideBarItem>
</el-menu>
</div>
</template>
<script>
import AsideBarItem from './asideBarItem'
export default {
name: 'mynav',
components: {
AsideBarItem
}
}
</script>
<style lang="scss" scope>
.nav-contain{
text-align: left;
}
</style>
3-3. asideBarItem.vue small loop component
<template>
<div class="asideBarItem-contant">
<!-- If hasOwnProperty detects children, it will be displayed recursively -->
<el-submenu
:index="router.path"
v-if="router.children">
<span slot="title">{<!-- -->{router.meta.title}}</span>
<!-- Recursive descendant navigation component -->
<asideBarItem
v-for="child in router.children"
:key="child.path"
:router="child" >
</asideBarItem>
</el-submenu>
<!-- Navigation without descendants -->
<el-menu-item
:key="router.path"
:index="router.path"
v-else
>
{<!-- -->{router.meta.title}}
</el-menu-item>
</div>
</template>
3-4. The component of the main rendering area on the right side of AppMain.vue is very simple, a router-view
<template>
<div class="appMain-container">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
Note: For each customized component, write some content to facilitate switching and identification.
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry-level skills treeVue componentsGlobal and local components 39531 people are learning the system