antanklayout_vue2
npm install antanklayout_vue2>
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)
bashnpm 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,然后正常添加路由即可
``