antanklayout_vue2

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_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）

<template>
  <Antanklayout>
    <transition appear name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </Antanklayout>
</template>
<script>
import Vue from 'vue'
import antanklayout from "antanklayout_vue2"
Vue.component('Antanklayout', antanklayout.Antanklayout)
export default {
  name: 'Layout',
  components: {
    Antanklayout:antanklayout.Antanklayout
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</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
    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，然后正常添加路由即可