antanklayout

>
This component is only used in ANTANK SaaS, which will solve the scheduling problem between multiple systems and is suitable for the VUE2 environment

It is done in three steps:
1) 安装组件（install the component）

Installation

``bash

npm i antanklayout_d

`

Usage

2) 引入组件（introduce the component）

Ingest styles globally
main.ts
`
import antanklayout_d from "antanklayout_d"
import 'antanklayout_d/lib/style.css'
app.use(antanklayout_d)

`

创建导入组件的页面（Create a Vue page "layout" layout.vue）

`



`
3) 动态路由（adjust the routing）


`
第一种方法
const DynameicMenuList = []
//路由扁平化处理
const getFlatMenuList = (menuList) => {
return menuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
}
//过滤和动态添加路由
const setDynameicMenuListPath = (menuList) => {
for (const item of getFlatMenuList(menuList)) {
item.children && delete item.children
router.addRoute("layout", item)
}
}

const routes = [
{ path: '/', component: auth },
{
path: "/layout",//调度子系统路由
name: "layout",
component: () => import("@/views/layout/index.vue"),
children: []
}
]

// 创建路由实例并传递 routes 配置
const router = createRouter({
// 使用 hash 模式。
history: createWebHashHistory(),
routes,
strict: false,
scrollBehavior: () => ({ left: 0, top: 0 })
})

setDynameicMenuListPath(account.menu)//动态添加路由


第二种方法，手动在路由表中把所有子路由的父级指向layout，然后正常添加路由即可

``