vue获取接口id_成功vue动态路由从接口获取菜单

前台：permission.js用于从接口获取数据

import { asyncRoutes, router, constantRoutes } from '@/router'

import { getList } from '@/api/MenuTable'

/* Layout */

import Layout from '@/layout'

import MainLayout from '@/layout/main'

import CommonLayout from '@/layout/Common'

import OnlyPageLayout from '@/layout/OnlyPage'

/**

* Use meta.role to determine if the current user has permission

* @param roles

* @param route

*/

function hasPermission(roles, route) {

if (route.meta && route.meta.roles) {

return roles.some(role => route.meta.roles.includes(role))

} else {

return true

}

}

const state = {

routes: [],

addRoutes: []

}

const mutations = {

SET_ROUTES: (state, routes) => {

state.addRoutes = routes

state.routes = constantRoutes.concat(routes)

}

}

//从数据库取数据地方

const actions = {

async generateRoutes({ commit }, roles) {

const result = await getList()

var data = result.Data;

console.log(data)

filterAsyncRouter(data)

data.forEach(element => {

if (element.children === null) delete element.children;

delete element.ID;

delete element.NodeId;

delete element.label;

delete element.ParentId;

delete element.name;

delete element.meta;

delete element.alwaysShow;

delete element.hidden;

var child = element.children;

if (child) {

child.forEach(element => {

if (element.children === null) delete element.children;

delete element.ID;

delete element.NodeId;

delete element.label;

delete element.ParentId;

if (element.children) {

var child = element.children;

child.forEach(element => {

if (element.children === null) delete element.children;

delete element.ID;

delete element.NodeId;

delete element.label;

delete element.ParentId;

delete element.alwaysShow;

delete element.hidden;

})

}

})

}

});

console.log(data)

commit('SET_ROUTES', data)

return data;

}

}

// 遍历后台传来的路由字符串，转换为组件对象

function filterAsyncRouter(asyncRouterMap) {

const accessedRouters = asyncRouterMap.filter(route => {

if (route.component) {

route.meta = { title: route.meta }

if (route.component === "MainLayout") {

route.component = MainLayout;

}

else if (route.component === "Layout") {

route.component = Layout;

}

else if (route.component === "CommonMain") {

route.component = CommonMain;

}

else if (route.component === "OnlyPageLayout") {

route.component = OnlyPageLayout;

}

else {

var aa = ""

aa = route.component;     // 先输出再在导入里使用

route.component = loadView(aa);

}

}

if (route.children && route.children.length) {

route.children = filterAsyncRouter(route.children)

}

return true

})

return accessedRouters

}

export const loadView = (view) => {

return (resolve) => require([`@/views${view}`], resolve)

}

export default {

namespaced: true,

state,

mutations,

actions

}

MenuTable.js文件

export function getList() {

return request({

url: 'http://192.168.124.9:12345/api/MenuTable/GetMenuTable',

method: 'get',

})

}

后台：

[HttpGet("GetMenuTable")]

public async Task GetMenuTable()

{

List MenuTableList = new List();

var MenuTable = await _IMenuTableStore.GetMenuTable();

List listAll = MenuTable.Where(i => i.NodeId != null).ToList();

var list = listAll.Where(i => i.ParentId == "root");

foreach (var item in list)

{

item.children = GetChilds(listAll, item.NodeId);

}

return IpResponse.Create(true, "0", "查询成功", list);

}

public List GetChilds(List DbMenuTableList, string ParentId)

{

List list = DbMenuTableList.Where(i => i.ParentId == ParentId).ToList();

foreach (var item in list)

{

var item2 = GetChilds(DbMenuTableList, item.NodeId);

if (item2.Count > 0)

{

item.children = item2;

}

}

return list;

}