file_safe_admin/src/layout/components/Sidebar/menu.vue

<template>
    <el-menu
    :default-active="$route.path"
    class="el-menu-box"
    text-color="#222"
    background-color="#FFFFFF"
    active-text-color="#F4453E"
    :unique-opened="true"
  >
    <menu-item :routes-data="routesData"></menu-item>
  </el-menu>
</template>
<script>
import menuItem from './menuList'
export default {
  name: 'index',
  components: {
    menuItem
  },
  computed: {
    routesData () {
      return this.$store.state.permission.addRoutes
    }
  },
  data () {
    return {
      activeMenu: '',
      isCollapse: false
    }
  },
  mounted () {
    console.log(this.$router)
    this.setActiveMenu(this.routesData)
  },
  methods: {
    // 设置选中菜单
    setActiveMenu (data) {
      let item = ''
      for (let i = 0; i < data.length; i++) {
        item = data[i]
        if (item.path === sessionStorage.getItem('currentPage')) {
          this.activeMenu = String(item.id)
          return
        } else {
          if (item.children) {
            this.setActiveMenu(item.children, i)
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-menu-box{
  height: 100%;
}
.el-menu{
  border-color: #C5C5C5;
}
</style>