First, page layout
<template>
<div class="home">
<el-container class="home-conatiner">
<! -- Header area -->
<el-header>
<div>
<img src=".. /assets/logo.png" alt="" />
<span>E-commerce background management system</span>
</div>
<el-button type="info" @click="outlogin">Log out</el-button>
</el-header>
<! -- Page body area -->
<el-container>
<! -- Sidebar (left) -->
<el-aside width="200px">
<! -- Menu area -->
<el-menu
background-color="# 333744"
text-color="#fff"
active-text-color="#ffd04b"
>
<! -- Level 1 menu -->
<el-submenu index="1">
<! -- Level 1 Menu template area -->
<template slot="title">
<i class="el-icon-location"></i>
<span>A navigation</span>
</template>
<! -- Level 2 menu -->
<el-menu-item index="1-4-1">
<! -- Level 2 Menu template area -->
<template slot="title">
<i class="el-icon-location"></i>
<span>A navigation</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<! -- Right content body -->
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data: () = > ({}),
methods: {
// Log out
outlogin() {
/ / remove the token
window.sessionStorage.clear()
// Jump to the login page
this.$router.push('/login')}}}</script>
<style lang="less" scoped>
.home {
height: 100%;
.home-conatiner {
height: 100%;
.el-header {
background-color: #373d41;
align-items: center;
display: flex;
justify-content: space-between;
div {
display: flex;
justify-content: start;
align-items: center;
img {
width: 60px;
height: 60px;
background-color: white;
border-radius: 50%;
}
span {
font-size: 20px;
color: white;
padding-left: 30px; }}.el-button{}}.el-aside {
background-color: # 333744;
}
.el-main {
background-color: #eaedf1; }}}</style>
Copy the code
Add token authentication via axios interceptor
- Since token permissions are required for each subsequent operation, the token is added to the request header before the request data is requested and the request is returned
- Set request interception in main.js
- There is no token in the request header at this point
- Add the Authorization attribute value
3. Obtain the left menu data
- 1. Get the data as the page loads
created() {
this.getMenuList()
},
Copy the code- 2. Define functions to get data
// Get all menus on the left
async getMenuList() {
// structure data and name it res
const { data: res } = await this.$http.get('menus')
console.log(res)
if(res.meta.status ! = =200) return this.$message.error(res.meta.msg)
this.menulist = res.data
console.log(this.menulist)
}
}
Copy the code- 3. Put the obtained data into the array defined in data
data: () = > ({
menulist: []}),Copy the code
Render the left menu with a double-layer for loop
- The outer loop is used to render the first level menu, and the inner loop is used to render the second level menu
- Add the ‘:index’ attribute to make sure that clicking on one menu does not affect the other menus, and add a null character to index to make it a string
<! -- Level 1 menu --><el-submenu
:index="item.id + ''"
v-for="item in menulist"
:key="item.id"
>
<! -- Level 1 Menu template area -->
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.authName }}</span>
</template>
<! -- Level 2 menu -->
<el-menu-item
:index="subitem.id + ''"
v-for="subitem in item.children"
:key="subitem.id"
>
<! -- Level 2 Menu template area -->
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ subitem.authName }}</span>
</template>
</el-menu-item>
</el-submenu>
Copy the code5. Set the font color for the selected item and add the category icon
- 1. Set the color of the second-level menu
- 2. Set the ICONS on the second-level menu
- 3. Set and menu ICONS
- 1. Define an array containing the ids of each level menu and set the icon name for it
data: () = > ({ menulist: [].iconlist: { 125: 'el-icon-user-solid'.103: 'el-icon-present'.101: 'el-icon-s-goods'.102: 'el-icon-s-order'.145: 'el-icon-monitor'}}),Copy the code- 2. Render the InconList data to the page
<! -- Level 1 Menu template area --><template slot="title"> <i :class="iconlist[item.id]"></i> <span>{{ item.authName }}</span> </template> Copy the code
You can only open one menu item at a time, and solve the border problem
- 1. Add the unique-Opened attribute to menu
<el-menu
background-color="# 333744"
text-color="#fff"
active-text-color="#409EFF"
unique-opened
>
Copy the code- 2. Border problem (uneven)
- Solution: Add border: None style to el-meun
.el-menu {
border: none;
}
Copy the code7. Realize the folding and expanding effect of the sidebar menu
- 1. Add a div box at the top of the sidebar. By default, expand the menu and click to collapse it
<div class="toggle-button" @click="toggle">|||</div>
Copy the code- Collapse-transition Specifies whether to collapse the menu horizontally (available only when mode is vertical), collapse-Transition specifies whether to enable collapse animation, and to add collapse properties and collapse-transition properties to menu
<el-menu
background-color="# 333744"
text-color="#fff"
active-text-color="#409EFF"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
>
data: () = > ({
menulist: [].iconlist: {
125: 'el-icon-user-solid'.103: 'el-icon-present'.101: 'el-icon-s-goods'.102: 'el-icon-s-order'.145: 'el-icon-monitor'
},
isCollapse: false
}),
Copy the code// Click the button to switch the menu to collapse and expand
toggle() {
this.isCollapse = !this.isCollapse
}
Copy the code- 3. Let the width of the sidebar vary as you expand and fold
<el-aside :width="isCollapse ? '64px' : '200px'">
Copy the codeEight, the realization of home route redirection
- 1. Create the welcome. vue component
<template>
<div>Welcome</div>
</template>
<script>
export default {
data: () = >({})}</script>
<style lang="less" scoped>
</style>
Copy the code- 2. Configure routes (define child routes in the HOME route)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '.. /components/Login.vue'
import Home from '.. /components/Home.vue'
import Welcome from '.. /components/Welcome.vue'
Vue.use(VueRouter)
const routes = [
/ / redirection
{
path: '/'.redirect: '/login'
},
{
path: '/login'.component: Login
},
{
path: '/home'.component: Home,
redirect: '/welcome'.children: [{path: '/welcome'.component: Welcome
}
]
}
]
const router = new VueRouter({
routes
})
// to Specifies the path to be accessed
// from indicates the path from which to jump
// Next is a function that permits
// next() permits next('/login') forces a jump
router.beforeEach((to, from, next) = > {
// If the path to be accessed is login, pass
if (to.path === '/login') return next()
/ / access token
const token = window.sessionStorage.getItem('token')
// If the token does not exist, the login page is forcibly redirected
if(! token)return next('/login')
// If the token exists, pass it
next()
})
export default router
Copy the code- 3. Add a route placeholder to the home.vue component to render Welcome to the Home page
<! -- Right content body --><el-main>
<! -- Route placeholder -->
<router-view></router-view>
</el-main>
Copy the codeNine, to achieve the transformation of the sidebar routing link
- 1. Enable routing mode for the sidebar (add router attribute for Menu, or :router=”true”)
<el-menu
background-color="# 333744"
text-color="#fff"
active-text-color="#409EFF"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
router
>
Copy the code- At this point, click the second-level menu to jump, and find that the path in the address bar is the ID of the second-level menu, which is not good
- 2. Change the IP address
<! -- Level 2 menu --><el-menu-item
:index="'/' + subitem.path"
v-for="subitem in item.children"
:key="subitem.id"
>
Copy the code