FE_huoran_data/src/layouts/navbar/index.vue

<template>
    <div>
        <ul class="nav">
            <li v-for="(item,index) in menus" :key="index" :class="{active: active == item.index}" @click="jump(item)">{{item.title}}</li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import addRoutes from '@/libs/route/addRoutes'
import Setting from '@/setting'
import util from '@/libs/util'
export default {
  data() {
    return {
      managerStr: this.$route.query.mg, // 判断是否在后台的标识，只有url上带了mg，并且mg的值为编码后的true，才算进入了后台
      isManager: false,
      active: this.$route.path,
      defaultMenus: [],
      // 前台菜单
      dataMenu: [{
        index: '/index/list',
        title: '首页'
      }, {
        index: '/data/list',
        title: '数据'
      }],
      // 后台菜单（下面要根据获取到的该角色拥有的权限来显示哪些菜单）
      managerMenus: [
        {
          index: '/stat/list',
          title: '数据统计'
        }, {
          index: '/screen',
          title: '大屏展示'
        }, {
          index: '/user/list',
          title: '用户管理'
        }, {
          index: '/role/list',
          title: '角色权限'
        }
      ],
      menus: [],
      actives: {}
    };
  },
  computed: {
    ...mapState('user', [
      'isCustomer'
    ]),
    ...mapState('auth', [
      'routes'
    ])
  },
  watch: {
    '$route'(to, from) {
      let actives = this.actives
      for (let i in this.actives) {
        if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`
      }
      this.active = this.$route.path
    }
  },
  mounted() {
    if (util.local.get(Setting.tokenKey)) {// 如果是登录状态
      this.getPer()
      // 判断是否在后台，并且存到store里
      if (this.managerStr && atob(decodeURI(this.managerStr)) === 'true') {
        this.isManager = true
        this.setManager(false)
      }
    } else {
      this.menus = this.defaultMenus
    }
  },
  methods: {
    ...mapActions('user', [
      'setManager'
    ]),
    initMenu() {
      if (this.isManager) {// 该值为true，则表示当前是在后台（是否是后台是通过url上面的mg来判断的）
        this.defaultMenus = this.managerMenus
        if (Setting.dynamicRoute) {
          let routes = this.routes
          let menus = []
          this.defaultMenus.map(e => {
            routes.find(n => n.name == e.index) && menus.push(e)
          })
          this.menus = menus
        } else {
          this.menus = this.defaultMenus
        }
      } else {
        // 如果是在前台,则判断有没有数据列表的权限
        if (this.routes.find(e => e.name === '/data/list')) {
          this.menus = this.dataMenu
        } else {
          this.menus = this.dataMenu[0]
        }
      }
    },
    jump(item) {
      const { index } = item
      if (index === '/screen') {
        window.open(this.$router.resolve(index).href)
      } else {
        this.active = item.index
        this.$router.push(item.index).catch(err => {})
      }
    },
    toIndex() {
      this.$router.push('/index')
      this.isManager = false
      this.setManager(true)
      this.initMenu()
    },
    // 获取权限列表
    getPer() {
      this.$get(`${this.api.getPermissions}?platformId=${Setting.platformId}`).then(res => {
        let routes = res.permissionMenu[0].children
        // 如果权限里没有后台的3个菜单，则隐藏进入后台的图标。/data/list是前台数据列表，仅在前台展示
        routes.length && !routes.find(e => e.path !== '/data/list') && this.$emit('hideSetting')
        Setting.dynamicRoute && addRoutes(routes)
        this.initMenu()
      }).catch(err => {
        // 被捕获了则显示默认菜单
        this.menus = this.defaultMenus
      })
    },
  }
};
</script>

<style lang="scss" scoped>
    .nav{
        position: absolute;
        top: 0;
        left: 280px;
        display: flex;
        li{
            padding: 0 15px;
            margin: 0 20px;
            font-size: 16px;
            line-height: 60px;
            color: #3F3F3F;
            cursor: pointer;
            border-bottom: 4px solid transparent;
            &.active{
                color: #0076FF;
                border-bottom-color: #0070FF;
            }
        }
    }
</style>