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 code

5. 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 code

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

Eight, 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 code

Nine, 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

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

E-commerce background management project homepage

First, page layout

Add token authentication via axios interceptor

3. Obtain the left menu data

Render the left menu with a double-layer for loop

5. Set the font color for the selected item and add the category icon

You can only open one menu item at a time, and solve the border problem

7. Realize the folding and expanding effect of the sidebar menu

Eight, the realization of home route redirection

Nine, to achieve the transformation of the sidebar routing link

E-commerce background management project homepage

First, page layout

Add token authentication via axios interceptor

3. Obtain the left menu data

Render the left menu with a double-layer for loop

5. Set the font color for the selected item and add the category icon

You can only open one menu item at a time, and solve the border problem

7. Realize the folding and expanding effect of the sidebar menu

Eight, the realization of home route redirection

Nine, to achieve the transformation of the sidebar routing link

Related Posts

Learn more about the Chrome Developer Console

What you know about browsers -🎉🎉🎉

The CSS Grid layout