VUE.JS Element-UI和vue-element-admin的后端数据接入的动态路由 / data functions should return an object / 菜单如何控制一级还是二级:alwaysShow

本人前端小学生,在入门vuejs和elementui框架的时候,使用了vue-element-admin,写权限模块,实现动态路由时候,因为vue-element-admin自带动态路由,但是路由数据是写死的,需要改成从后端获取数据,找了很多篇文章,在此记录一下

后端建立用户表,角色表,用户与角色关联表等

查询出登录人员的角色中绑定的所有菜单

后端需要递归查询出所有的节点,第一层然后每个菜单的所有子菜单在每个子菜单,大概长这个样子

把菜单数据和用户信息放在一起查询出来

const { roles,routelist } = await store.dispatch('user/getInfo')
//routelist 是后端返回的上面的数据
// generate accessible routes map based on roles
const accessRoutes = await store.dispatch('permission/generateRoutes1', routelist)
router.addRoutes(accessRoutes)

仓储中处理

generateRoutes1({ commit }, routelist) {
    return new Promise(resolve => {
      let accessedRoutes
      accessedRoutes = filterAsyncRoutes1(routelist)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
export function filterAsyncRoutes1(routelist) {
  const res = []
  routelist.forEach(route => {
    const tmp = { ...route }
    tmp.component = () => import(tmp.component1)
    res.push(tmp)
  })
  return res
}


data functions should return an object
Property "visible" must be accessed with "$data.visible" because properties starting with "$" or "_"
控制台报这个错误,查了很多都是说 data应该返回一个对象什么的,之前没问题的就是动态路由还没做好的时候报的,最后一步步调试找到原因
第一个问题:忘记了
第二个问题:最开始后端接口中component1是component的(见上图),然后vue中是这么写的tmp.component = () => import(tmp.component) , 后来发现这个地方有问题 ,所有后端component改成component1

菜单如何控制一级还是二级?

alwaysShow: true, // will always show the root menu 总是显示父菜单吗?

此属性默认为false

此属性为true的话,会显示为二级菜单,父菜单的名称和图标根据父菜单的meta中title和icon显示,子菜单的名称和图标根据子菜单的meta中title和icon显示

此属性为false的话且只有一个children子菜单的话会显示为一级菜单,如果有多个children子菜单的话,还是会显示二级菜单,但是父菜单的名称就不会显示了

转载请说明出处:第六感博客 原文链接:

标签: Vue.js

相关阅读:

vuepress编辑的md文件运行后显示乱码 vscode编码设置

vue新建项目

vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

vue项目中出现/sockjs-node/info?t=、/sockjs-node/../../xhr_streaming?t=请求

bootcdn又挂了(bootcss.com),推荐几个其他cdn的站点