首页 > 其他分享 >vue-element-admin改为从后台获取菜单

vue-element-admin改为从后台获取菜单

时间:2023-02-19 14:11:06浏览次数:35  
标签:vue const admin accessedRoutes element 菜单 tempAsyncRoutes data response

一、修改文件\src\router\index.js

文件的asyncRoutes清理为

export const asyncRoutes = [
  { path: '*', redirect: '/404', hidden: true }
]

二、修改src\store\modules\permission.js

增加 

import { getMenu } from '@/api/user'

复制并注释 const actions = {

新的

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      const loadMenuData = []
      // 先查询后台并返回左侧菜单数据并把数据添加到路由
      getMenu(state.token).then(response => {
        let data = response
        if (response.code !== 20000) {
          alert(JSON.stringify('菜单数据加载异常'))
          // throw new Error('菜单数据加载异常')
        } else {
          data = response.data
          Object.assign(loadMenuData, data)
          const tempAsyncRoutes = Object.assign([], asyncRoutes)
          generaMenu(tempAsyncRoutes, loadMenuData)
          let accessedRoutes
          if (roles.includes('admin')) {
            accessedRoutes = tempAsyncRoutes || []
          } else {
            accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles)
          }
          commit('SET_ROUTES', accessedRoutes)
          resolve(accessedRoutes)
        }
      }).catch(error => {
        console.log(error)
      })
    })
  }
}

标签:vue,const,admin,accessedRoutes,element,菜单,tempAsyncRoutes,data,response
From: https://www.cnblogs.com/robots2/p/17134684.html

相关文章

  • vue框架4
    购物车案例v-model进阶<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></h......
  • vue这些原理你都知道吗?(面试版)
    前言在之前面试的时候我自己也经常会遇到一些vue原理的问题,我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来,欢迎大家一起学习交流,有更好的方法......
  • 社招前端经典vue面试题(附答案)
    Vuex页面刷新数据丢失怎么解决体验可以从localStorage中获取作为状态初始值:conststore=createStore({state(){return{count:localStorage.getIt......
  • vueday5
    上节课回顾#0checkboxv-model只针对于input,做双向数据绑定 -单选:选中或不选中选中就是true,不选中就是false-多选:数组,选了多个,把选中的value值放到数......
  • thinkphp5或者fastadmin自定义标签,实现副栏目的调用
    学着写了一下,终于搞定了,顺便分享一下!taglib是tp框架自定义标签功能,如果你用过cms,肯定见过类似:{dede:arclisttypeid=''row=''col=''titlelen=''infolen=''orderby=......
  • 从零入门Vue.js!六步学习路线和知识体系盘点详解!
    Vue.js是一款流行的JavaScript前端框架,它允许开发者轻松地构建交互性强的用户界面。学习这个阶段的时候有一定门槛,并不是属于零基础就能入门学习的,在学习vue.js的时候可以......
  • uniapp nvue和vue 全局变量 国际化多语言开发 computed data globalData i18n undefin
    uni-app全局变量的几种实现方式1.公共模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue......
  • 购物车案例&v-model进阶&与后端交互&vue生命周期&vue组件
    目录购物车案例&v-model进阶&与后端交互&vue生命周期&vue组件今日内容概要今日内容详细1购物车案例1.1基本购物车1.2带全选全不选1.3带加减2v-model进阶3与后端交互3......
  • vue+.net入门级书签项目
    vu3+.net6webApi书签管理项目前言Gitee项目地址:https://gitee.com/zyplj/book-marksGithub项目地址:https://github.com/ZyPLJ/BookMarks作为一个bug程序员,保存了很多......
  • vue3 安装教程
    安装教程:https://www.runoob.com/vue2/vue-install.htmlhttps://cn.vuejs.org/guide/introduction.html 修改npm下载镜像的命令:  vue3启动应用:npminitvue@la......