具体代码如下:
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项目如何实现动态路由?


基础教程推荐
猜你喜欢
- CSS清除浮动常用方法小结 2023-12-27
- Redis内存分析工具—redis-rdb-tools (转载http://www.voidcn.com/article/p-axfdqxmd-bro.html) 2023-10-26
- vuejs如何利用qrcode生成二维码 2025-01-13
- 关于 css:如何在浏览器中勾勒 HTML 页面的元素以 2022-09-21
- 如何利用vue实现css过渡和动画 2024-03-11
- Vue vue.config.js 的详解与配置 2023-10-08
- JS的Form表单转JSON格式的操作代码 2023-07-10
- vue3语法如何利用mitt实现兄弟组件传值 2025-01-12
- CSS 同级元素position:fixed和margin-top共同使用的问题 2023-12-30
- Ajax实现省市县三级联动 2023-02-23