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

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）

<template>
  <antanklayout>
    <transition appear name="fade-transform" mode="out-in">
      <keep-alive>
        <router-view :key="route" />
      </keep-alive>
    </transition>
  </antanklayout>
</template>

<script setup lang="ts" name="layout">
const route = computed(() => {return location.href})
// 注入刷新页面方法
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
provide("refresh", refreshCurrentPage);
</script>

<style scoped lang="scss">
</style>

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，然后正常添加路由即可