vue-element-admin的左边菜单栏没有显示数据

这是在添加了动态路由后,页面中的左侧菜单栏没有了数据,如下图

在没有添加动态路由前,是可以正常显示的,如下图

附上该路由的代码(src/layout/components/Sidebar/index.vue)

<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'

export default {
  components: { SidebarItem, Logo },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    routes() {
      //console.log("获取到的标题是:"+global.myRoutes.map(route => route.title));
      //return this.$router.options.routes.concat(global.myRoutes)
      //console.log('global.myRoutes length:', global.myRoutes.length)
      const mergedRoutes = this.$router.options.routes//.concat(global.myRoutes);
      //console.log("合并后的路由:", mergedRoutes);
      return mergedRoutes;
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    },
    
  },
  
}
</script>

但是一添加了动态路由后就不行了,为此我把左侧菜单栏显示的流程都检查了好多遍,并且输出了很多。最能迷惑我的是,前端各种输出都有后端传过来的数据,这让我更加坚信,是前端哪里写错了的原因,然后就一直翻查前端。直到看到一个这样的null

怎么meat就是一个object,而meat就是null了呢,也辛亏是翻了很久前端的代码,脑子一抽,突然想起meta就是上面我附的代码里面的一个属性,至此,问题基本解决了,就是后端拿数据的时候,把单词写错了,才导致meta写成了meat,所以去到后端,将它改回来即可。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值