vue-element-admin侧边栏动态添加,vue-element-admin文档

　　#8203;vue-元素-管理是一个纯前端的框架，左侧菜单是根据路由生成的。实际开发中经常需要根据当前登陆人员的信息从后端获取菜单进行展示，本文将详细介绍如何实现该功能

2、详解

　　整体思路为：登陆成功后根据用户信息获取菜单根据菜单生成路由信息

2.1、新增asyncRoutes路由

　　在某视频剪辑软件路由器路径src \路由器\index.js中新增异步路由数组，用来存放后端获取的菜单对应的路由信息。

　　导出常量异步路由=[

　　{路径："*",重定向："/404",隐藏：true }

　　]

　　康斯坦特卢特斯和异步路由的区别

　　constantRoutes:不需要动态判断权限的路由，如登录页、404等通用页面。

　　异步路由：需求动态判断权限并通过添加路线动态添加的页面

2.2、新建permission.js文件

　　在状态管理路径src \ store \ modules \ permission射流研究…下新建permission.js文件，该操作为最重要的一步，主要是从后端查询菜单并生成路由。

　　从" @/路由器"导入{ asyncRoutes，constantRoutes }

　　从" @/API/用户"导入{ fetchUserMenuList }

　　从" @/布局"导入布局

　　/**

　　* 静态路由懒加载

　　* @param视图格式必须为xxx/xxx开头不要加斜杠

　　* @返回

　　export const loadView=(view)={

　　return(resolve)=require([`@/views/$ { view })。vue `]，解决)

　　}

　　/**

　　* 把从后端查询的菜单数据拼装成路由格式的数据

　　* @param路线

　　* @param数据后端返回的菜单数据

　　导出函数通用菜单(路线，数据){

　　data.forEach(item={

　　常量菜单={

　　路径：item.url，

　　component: item.component===# ？布局：loadView(item.component)，

　　hidden: item.status===0，//状态为0的隐藏

　　重定向：item.redirect

　　孩子：[],

　　名称：项目。代码，

　　meta: item.meta

　　}

　　if (item.children) {

　　generaMenu(menu.children，item.children)

　　}

　　路由.推送(菜单)

　　})

　　返回路线

　　}

　　常量状态={

　　路线：[],

　　添加路由：[]

　　}

　　常量突变={

　　设置路线：(州，路线)={

　　state.addRoutes=routes

　　//拼接静态路由和动态路由

　　状态。路线=固定路线。串联(路线)

　　}

　　常量操作={

　　generateRoutes({ commit }，token) {

　　返回新承诺(resolve={

　　//通过代币从后端获取用户菜单，并加入全局状态

　　fetchUserMenuList(token).然后(res={

　　const menuData=Object.assign([]，res.data)

　　const tempAsyncRoutes=object。分配([]，异步路由)

　　const accessed routes=genera菜单(tempasyncproutes，menuData)

　　提交(设置路由，访问路由)

　　解析（访问路由)

　　}).接住(错误={

　　console.log(错误)

　　})

　　}

　　导出默认值{

　　命名空间：对，

　　状态，

　　突变，

　　行动

　　}

2.3、在vuex中注册permission模块

　　如果使用的是vue-元素-管理请跳过此步，因为它在src \ store \索引。射流研究…中自动注册了src \商店\模块下的所有模块。如果你使用的是vue-元素-模板，可以参考管理员，将索引。射流研究…文件改造一下，也可以手动进口一下。

　　从“vue”导入某视频剪辑软件

　　从" vuex "导入状态管理

　　从导入吸气剂./getters

　　Vue.use(Vuex)

　　//https://网络包。js。org/guides/dependency-management/#需要上下文

　　const模块文件=要求。上下文(./modules ，true，/\ .js$/)

　　//您不需要"从.导入应用程序"。/模块/应用程序 ` 1

　　//它将自动要求模块文件中的所有状态管理模块

　　const modules=modulesFiles.keys()。reduce((modules，modulePath)={

　　//设置 ./app.js=app

　　const modulename=modulepath.replace(/^\.\/(.*)\.\w $/， $1 )

　　常数值=模块文件(模块路径)

　　模块[moduleName]=value.default

　　返回模块

　　}, {})

　　const store=new Vuex。商店({

　　模块，

　　吸气剂

　　})

　　导出默认存储

2.4、在getters中增加路由状态

　　在vuex路径src \ store \ getters.js中添加menusRoutes状态。

　　menus routes:state=state . permission . routes

2.5、修改菜单生成数据来源

　　在路径src \ layout \ components \ sidebar \ index . vue中，修改路线的数据源。原始数据源是routes，它是从vuex获得的。

　　路线(){

　　//返回这个。$router.options.routes

　　归还这个。$store.getters.menusRoutes

　　至此，从后端获取菜单数据到页面显示的逻辑已经完成。现在，登录后调用。

2.6、登陆后获取菜单

　　在vuex path src \ store \ modules \ user . js的登录方法中，通过令牌获取菜单添加登录成功生成路由逻辑。

　　//获取菜单，在其他文件中调用动作时必须添加{root: true}。

　　分派( permission/generateRoutes ，data，{ root: true })。然后((accessRoutes)={

　　router.addRoutes(访问路由)

　　})

2.7、解决刷新后页面空白

　　以上内容已经可以实现登录后显示左侧菜单的功能，但是你会发现每次刷新页面，页面都会变成空白。这是因为当页面刷新时，vue实例会被重新加载，vuex的store中的数据会被重新赋值，导致我们在vuex中的路由信息被清空。

　　在src\permission.js中添加重新获取路由代码

　　const access routes=await store . dispatch( permission/generate routes ，store.getters.token)

　　router.addRoutes(访问路由)

　　下一个({.到，替换：true })

3、总结

　　至此，完成了根据用户信息动态获取菜单内容。

　　这就是这篇关于使用vue-element-admin框架从后端动态获取菜单的文章。有关从vue-element-admin动态获取菜单的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。