2021/10/29 vue-antd 如何实现动态路由
2021/10/29
文件(路径):router.map.js 项目根目录/src/router/async/router.map.js
Login.vue 项目根目录/src/pages/login/Login.vue
此处仅为测试。
请复制一下代码到router.map.js:
// 视图组件 const view = { tabs: () => import('@/layouts/tabs'), blank: () => import('@/layouts/BlankView'), page: () => import('@/layouts/PageView') } // 路由组件注册 const routerMap = { login: { authority: '*', path: '/login', component: () => import('@/pages/login') }, root: { path: '/', name: '登录', redirect: '/login', component: view.tabs }, devAdmin: { path: '/devAdmin', name: '菜单名', redirect: '/devAdmin', component: view.page }, developer: { path: '/devAdmin/developer', component: () => import("@/pages/devAdmin/developer"), }, permisGroup: { path: '/devAdmin/permisGroup', component: () => import("@/pages/devAdmin/permisGroup"), }, } export default routerMap
解释:在登录界面会有获取路由的入口,我在入口前面定义了我要模仿后台传到前台的路由数组数据,数据格式如下:
let data = [ { router: "root", children: [ //root 路由的子路由配置 { router: "home", path: "/home", // url路径 children: [], name: "首页", icon: "user", component: () => import("@/pages/home"), }, { router: "mune", path: "/mune", name: "菜单名1", icon: "menu", children: [ { router: "mune", path: "/mune/muner", name: "菜单名2", icon: "form", component: () => import("@/pages/mune/muner"), }, { router: "permily", path: "/opener/permily", name: "菜单名2", icon: "form", component: () => import("@/pages/opener/permily"), }, ], }, ]; loadRoutes(data); this.$router.push("/home");
你可能有点糊涂,但这个不是给你看的,是给我自己看的,这不是一篇适用于大众的教程,而是我记忆的一把钥匙。
注意:asyncRoutes要设置为true,在setting.config.js里面。
注意!:后台传过来的路由的一级导航要在router.map.js的routerMap数组里面。