具体代码如下:
function BuildRoutes(routes) {
let element = {
name: routes.name,
path: routes.path,
component: () => import(`@/${routes.component}.vue`)
};
if (routes.component == "") {
delete element.component;
}
if (!isNull(routes.children) || !isUndefined(routes.children)) {
element.children = [];
routes.children.forEach(item => {
element.children.push(BuildRoutes(item));
});
return element;
}
return element;
}
// 递归组装路由信息
function dynamicBuild(source) {
let element = {
name: source.label,
path: source.full_url,
component: source.component
};
if (source.children != null) {
element.children = [];
source.children.forEach(item => {
element.children.push(dynamicBuild(item));
});
return element;
}
return element;
}
// vuex mutations 函数
generateRoutes: (state, routes) => {
state.addRouters = routes;
let routers = BuildRoutes(routes);
if (isObject(routers)) {
routers = [routers];
}
router.addRoutes(routers);
}
// 动态路由请求数据获取
function dynamicRouter() {
menuList().then(res => {
let backendRouter;
backendRouter = dynamicBuild(res.data.data[0]);
storage.setItem({
name: 'backend_router',
value: backendRouter,
expires: new Date().getTime() + 60 * 60 * 1000
});
store.dispatch('GenerateRoutes', backendRouter)
});
}
以上是编程学习网小编为您介绍的“vue项目如何实现动态路由?”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue项目如何实现动态路由?


猜你喜欢
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据 2022-12-13
- HTML申请注册表练习 2023-10-27
- 纯JS实现AJAX局部刷新功能 2023-01-31
- Ajax实现动态加载数据 2023-02-01
- echarts如何实现动态曲线图(多条曲线) 2022-08-30
- 前端实现滑动按钮AJAX与后端交互的示例代码 2023-02-24
- vue适配移动端字体 2023-10-08
- ajax从JSP传递对象数组到后台的方法 2023-02-15
- vue form表单验证出现选择输入了值,但是还是提示未选择时的问题 2023-10-08
- 实例讲解如何使用CSS保持页面内容宽高比 2024-02-19