-
Notifications
You must be signed in to change notification settings - Fork 215
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Question] 菜单怎么从远程服务器拉取 #216
Comments
menuData 是 props 主动绑定的数据,你可以自行从后端拉取数据后,设置到这个属性上 |
能不能像 React 远程服务器拉去菜单 一样 直接设置 json? |
不能 |
你直接在页面 onMounted 或者 setup 内直接 axios 发起请求获得的数据设置到 menuData props 即可,没必要如此包装一层 |
我还是不知道怎么弄请指教。 const {menuData} = getMenuData(clearMenuItem(router.getRoutes())); // console.log(menuData) |
const menuData = ref([]);
onMounted(() => {
axios.get().then(res => {
menuData.value = res.data;
// 如果要处理结构化菜单数据,可以使用 menuData.value = getMenuData(clearMenuItem( res.data ));
})
});
|
我路由是这样子的 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
The text was updated successfully, but these errors were encountered: