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_vue2

`

Usage

2) 引入组件（introduce the component）

Ingest styles globally
main.ts
`
import 'antanklayout_vue2/dist/antanklayout_vue2.css'

`

创建导入组件的页面（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
if (item.component && typeof item.component == 'string') {
if (item.component == 'Layout') {
item.component = Layout
} else if (item.component == 'SeatMenu') {
item.component = Layout
} else if (item.component == 'AsideMenu') {
item.component = Layout
} else if (item.component == 'AppMain') {
item.component = Layout
} else if (item.component == 'MainContent') {
item.component = Layout
}
}

if(item.path && !item.redirect){
DynameicMenuList.push({
path: "/layout",
name: "layout",
component: Layout,
redirect: item.path,
children:[
item
]
})
}
}
}
setDynameicMenuListPath(venue.venue)//动态添加路由

const createRouter = () => new Router({
mode: 'hash',
scrollBehavior: () => ({ y: 0 }),
routes: [...DynameicMenuList,
{
path: '/',//开始进入系统
redirect: HOME_URL
},
{
path: "/layout",//调度当前系统的路由
name: "layout",
component: () => import("layout.vue"),//先前创建的页面
children: []
}]
})


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

``