[Question] 菜单怎么从远程服务器拉取

[InfernalAzazel]

🧐 问题描述 Problem Description

我想做一个用户权限管理，我想到就是在后端传过来路由，前端这边 prolayout 菜单如何动态设置路由？

💻 示例代码 Sample code

🚑 其他信息 Other information

[sendya]

menuData 是 props 主动绑定的数据，你可以自行从后端拉取数据后，设置到这个属性上

[InfernalAzazel]

能不能像 React 远程服务器拉去菜单 一样 直接设置 json？

[sendya]

不能

[sendya]

你直接在页面 onMounted 或者 setup 内直接 axios 发起请求获得的数据设置到 menuData props 即可，没必要如此包装一层

[InfernalAzazel]

我还是不知道怎么弄请指教。

const {menuData} = getMenuData(clearMenuItem(router.getRoutes())); const axios = inject('axios') as AxiosStatic

// console.log(menuData) onMounted(async () => { // 获取用户资料 await axios.get('/api/v1/user_one') .then((res: AxiosResponse) => { console.log(res.data) }); console.log(menuData) })

[sendya]

const menuData = ref([]);

onMounted(() => {
  axios.get().then(res => { 
    menuData.value = res.data;
    // 如果要处理结构化菜单数据，可以使用 menuData.value = getMenuData(clearMenuItem( res.data ));
  })
});

但你要怎么映射你的 vue-router ？

[InfernalAzazel]

我路由是这样子的

const routes: RouteRecordRaw[] = [
    { 
      path: '/',
      name: 'layout',
      meta: { title: 'sh' }, 
      redirect: '/vulnerability',
      component: () => import('./layout/index.vue'),
      children: [
        {
          path: '/hmoe',
          name: '首页',
          meta: { title: '首页', icon: 'database-outlined' },
          component: () => import('./views/home/index.vue'),
        }
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./views/login/index.vue'),
    }
  ]

没加入后端数据前效果

菜单元素

- 首页

我想添加 在 菜单添加这个路由

// 这是后端返回的json ，这个可以按照你的方式返回json的，后端前端都是我写
{
          'path': '/vulnerability',
          'name': '漏洞数据',
          'meta': { 'title': '漏洞数据', 'icon': 'database-outlined' },
         ' component': () => import('./views/vulnerability/index.vue'),
        }

加入后端数据后的效果

菜单元素

- 首页
- 漏洞数据

``

[InfernalAzazel]

@sendya 非常感谢！！！

可以了，我把代码贴出来希望能够帮助后来者！

这个只有注册过的路由才行，没注册过的会有异常。

const menuData = ref([]);
const axios = inject('axios') as AxiosStatic

// console.log(menuData)
onMounted(async () => {
  // 获取用户资料
  await axios.get('/api/v1/user_one')
      .then((res: AxiosResponse) => {
        console.log(res.data)
      });
  menuData.value = [
    {
      path: '/vulnerability',
      name: '漏洞数据',
      meta: { title: '漏洞数据', icon: 'database-outlined' },
    }
  ]
  console.log(menuData)
})

[InfernalAzazel]

下面是解决方案

const {menuData} = getMenuData(clearMenuItem(router.getRoutes()));

const axios = inject('axios') as AxiosStatic

// console.log(menuData)
onMounted(async () => {
  // 获取用户资料
  await axios.get('/api/v1/user_one')
      .then((res: AxiosResponse) => {
        console.log(res.data)
      });

  router.addRoute('/',{
    path: '/',
    name: 'layout',
    meta: { title: 'layout' },
    redirect: '/vulnerability',
    component: () => import('../layout/index.vue'),
    children: [
      {
        path: '/vulnerability',
        name: 'vulnerability',
        meta: { title: '漏洞数据', icon: 'database-outlined' },
        component: () => import('../views/vulnerability/index.vue'),
      },
      {
        path: '/userinfo',
        name: 'userinfo',
        meta: { title: '个人中心', icon: 'UserOutlined' },
        component: () => import('../views/userinfo/index.vue'),
      },
    ]
  });

})