Closed InfernalAzazel closed 2 years ago
menuData 是 props 主动绑定的数据,你可以自行从后端拉取数据后,设置到这个属性上
能不能像 React 远程服务器拉去菜单 一样 直接设置 json?
不能
你直接在页面 onMounted 或者 setup 内直接 axios 发起请求获得的数据设置到 menuData props 即可,没必要如此包装一层
我还是不知道怎么弄请指教。
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) })
const menuData = ref([]);
onMounted(() => {
axios.get().then(res => {
menuData.value = res.data;
// 如果要处理结构化菜单数据,可以使用 menuData.value = getMenuData(clearMenuItem( res.data ));
})
});
但你要怎么映射你的 vue-router ?
我路由是这样子的
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'),
}
加入后端数据后的效果
菜单元素
- 首页
- 漏洞数据
``
@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)
})
下面是解决方案
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'),
},
]
});
})
🧐 问题描述 Problem Description
我想做一个用户权限管理,我想到就是在后端传过来路由,前端这边 prolayout 菜单如何动态设置路由?
💻 示例代码 Sample code
🚑 其他信息 Other information