MyAside.vue

<template>
  <el-menu
    default-active="$route.path"
    class="layout-aside-container"
    background-color="#fff"
    text-color="#000"
    active-text-color="#42b983"
  >
    <router-link to="/home/users">
      <el-menu-item index="/users" class="left-aside-item">
        <i class="el-icon-user"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
    </router-link>
    <router-link to="/home/chat">
      <el-menu-item index="/chat" class="left-aside-item">
        <i class="el-icon-chat-line-square"></i>
        <span slot="title">对话管理</span>
      </el-menu-item>
    </router-link>
    <router-link to="/home/rights">
      <el-menu-item index="/rights" class="left-aside-item">
        <i class="el-icon-setting"></i>
        <span slot="title">权限管理</span>
      </el-menu-item>
    </router-link>
    <router-link to="/home/goods">
      <el-menu-item index="/goods" class="left-aside-item">
        <i class="el-icon-goods"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
    </router-link>
    <router-link to="/home/orders">
      <el-menu-item index="/orders" class="left-aside-item">
        <i class="el-icon-s-order"></i>
        <span slot="title">订单管理</span>
      </el-menu-item>
    </router-link>
    <router-link to="/home/settings">
      <el-menu-item index="/settings" class="left-aside-item">
        <i class="el-icon-setting"></i>
        <span slot="title">系统设置</span>
      </el-menu-item>
    </router-link>
  </el-menu>
</template>
<script>
export default { name: "MyAside" };
</script>
<style lang="less" scoped>
.layout-aside-container {
  width: 250px;
  height: 100%;
  border-right: 1px solid #eaeaea;
}
.left-aside-item {
  font-size: 20px;
}
</style>