antd框架--页面组件

路由：router.config.js

// eslint-disable-next-line
import { UserLayout, BasicLayout, BlankLayout } from '@/layouts'
import { bxAnaalyse } from '@/core/icons'

const RouteView = {
  name: 'RouteView',
  render: h => h('router-view')
}

export const asyncRouterMap = [
  {
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: { title: 'menu.home' },
    redirect: '/dashboard/displayIt',
    children: [
      {
        path: '/collect',
        name: 'collect',
        redirect: '/collect/collectPage',
        component: RouteView,
        meta: { title: 'menu.collect', icon: 'form',keepAlive: false, permission: ['dashboard'] },
        children: [
          {
            path: '/collect/collectPage',
            name: 'DisplayMine',
            component: () => import('@/views/collect/mine'),
            meta: { title: 'menu.collect.favorite', keepAlive: false, permission: ['dashboard'] }
          }
        ]
      },
      // dashboard menu.dashboard
      {
        path: '/dashboard',
        name: 'dashboard',
        // redirect: '/dashboard/displayIt',
        component: RouteView,
        meta: { title: 'menu.dashboard', icon: 'dashboard',keepAlive: false, permission: ['dashboard'] },
        children: [
          {
            path: '/dashboard/displayIt',
            name: 'DisplayMat',
            component: () => import('@/views/dashboard/displayMat'),
            meta: { title: 'menu.dashboard.material', keepAlive: false, permission: ['dashboard'] }
          },
          {
            path: '/dashboard/displayMaterial',
            name: 'DisplayIt',
            component: () => import('@/views/dashboard/displayIt'),
            meta: { title: 'menu.dashboard.it', keepAlive: false, permission: ['dashboard'] }
          },
          {
            path: '/dashboard/test',
            name: 'Test',
            component: () => import('@/views/other/test'),
            meta: { title: 'test', keepAlive: false, permission: ['dashboard'] }
          }
        ]
      },
     
      // other PageView
      {
        path: '/other',
        name: 'otherPage',
        component: RouteView,
        meta: { title: '系统设置', icon: 'slack', permission: [ 'dashboard' ] },
        redirect: '/other/icon-selector',
        children: [
          {
            path: '/other/list/tree-list',
            name: 'TreeList',
            component: () => import('@/views/other/TreeList'),
            meta: { title: '树目录表格', keepAlive: true }
          },
          {
            path: '/other/list/edit-table',
            name: 'EditList',
            component: () => import('@/views/other/TableInnerEditList'),
            meta: { title: '内联编辑表格', keepAlive: true }
          },
          {
            path: '/other/list/user-list',
            name: 'UserList',
            component: () => import('@/views/other/UserList'),
            meta: { title: '用户列表', keepAlive: true }
          },
          {
            path: '/other/list/role-list',
            name: 'RoleList',
            component: () => import('@/views/other/RoleList'),
            meta: { title: '角色列表', keepAlive: true }
          },
          {
            path: '/other/list/permission-list',
            name: 'PermissionList',
            component: () => import('@/views/other/PermissionList'),
            meta: { title: '权限列表', keepAlive: true }
          }
        ]
      }
    ]
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
]

/**
 * 基础路由
 * @type { *[] }
 */
export const constantRouterMap = [
  {
    path: '/user',
    component: UserLayout,
    redirect: '/user/index',
    hidden: true,
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/index')
      },
      {
        path: 'login',
        name: 'login',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
      },
      {
        path: 'register',
        name: 'register',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
      },
      {
        path: 'register-result',
        name: 'registerResult',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
      },
      {
        path: 'recover',
        name: 'recover',
        component: undefined
      }
    ]
  },

  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
  }
]

封装的页面组件

<!-- 公共可调用的展示看板排列 -->
<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="row" v-for="(items, indexs) in block" :key="indexs">
        <!-- :style="{backgroundImage:'url('+require('@/assets/img/logo.png')+')'}" -->
        <div v-for="(item, index) in items" :key="index" class="box">
          <div style="display: flex; height: 60px; align-items: center">
            <div class="fonts fontdiv">{{ item.name }}</div>
            <img src="@/assets/img/lock.png" v-if="item.permission == false" alt="" class="lock" />
            <img
              src="@/assets/img/collect-dark.png"
              v-if="item.collectStatus == false"
              @click="changeCollectStatus(item)"
              alt=""
              class="collect"
            />
            <img
              src="@/assets/img/collect-bright.png"
              v-else
              @click="changeCollectStatus(item)"
              alt=""
              class="collect"
            />
          </div>
          <a-button type="primary" ghost @click="jumpWeb(item.url)" class="linkBtn">Link To</a-button>
        </div>
      </div>
    </template>
  </page-header-wrapper>
</template>

<script>
import { message } from 'ant-design-vue'
export default {
  name: 'Display',
  props: {
    block: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  watch:{
    '$route': function() {
       this.message = this.$route.params.name
    }
  },
  methods: {
    jumpWeb(value) {
      console.log(value)
      console.log('effect')
      window.location.href = value
    },
    collectStar(value) {
      value.img = ''
    },
    changeCollectStatus(item) {
      console.log(item)
      if (item.collectStatus == false) {
        item.collectStatus = true
        message.success(item.name + '收藏成功')
      } else if (item.collectStatus == true) {
        item.collectStatus = false
        message.warning(item.name + '取消收藏成功')
      }
    },
  },
}
</script>

<style scoped>
.row {
  display: flex;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}
.box {
  width: 31%;
  height: 100%;
  background-color: rgb(241, 241, 247);
  margin-right: 2%;
  border-radius: 5%;
  padding: 10px 10px;
  box-shadow: 2px 5px 5px 1px rgba(203, 206, 212, 0.2);
  /* background-image: url('@/assets/img/logo.png'); */
}
.linkBtn {
  margin-top: 80px;
}
.fonts {
  font-family: Century Gothic;
  font-size: 15px;
}
.fontdiv {
  width: 80%;
}
.collect {
  width: 45px;
  height: 45px;
}
.lock {
  width: 35px;
  height: 35px;
}
</style>

调用页面：

<template>
    <Display :block="block"></Display>    
</template>
  
  <script>
  import { message } from 'ant-design-vue';
  import Display from '@/components/DisplayFrame/display.vue'
  export default {
    name:'DisplayMine',
    components:{
      Display
    },
    data () {
      return {
        block: [
          [{
              name: 'IT Overview Dashboard',
              url: 'https://insighttwo.flex.com/#/site/LASI/views/ITOverviewDashboard/Overview',
              collectStatus: false,
              permission: true
            },
            {
              name: 'Office Network Switch Port Basic Security Tracking Dashboard',
              url: 'https://insighttwo.flex.com/#/site/LASI/views/OfficeNetworkSwitchPortBasicSecurityTrackingDashboard/OfficeSwitchPort',
              collectStatus: false,
              permission: false
            }],
            [{
              name: 'S_MNG_DownTimeReport',
              url: 'https://insighttwo.flex.com/#/site/LASI/views/MECHDashboard/S_MNG_DownTimeReport?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no&:origin=viz_share_link',
              collectStatus: false,
              permission: false
            },
            {
              name: 'S-MNG-RunningStatusByRange',
              url: 'https://insighttwo.flex.com/#/site/LASI/views/MECHDashboard/S-MNG-RunningStatusByRange?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no&:origin=viz_share_link',
              collectStatus: false,
              permission: true
            },
            {
              name: 'S-MNG-MACRunningStatusReport',
              url: 'https://insighttwo.flex.com/#/site/LASI/views/MECHDashboard/S-MNG-MACRunningStatusReport?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no&:origin=viz_share_link',
              collectStatus: false,
              permission: false
            }]
          ]
      }
    },
    mounted () {
    },
    methods: {
    }
  }
  </script>
  
  

坑：多个页面调用同一个页面组件时，不进行重新渲染的问题，需要将路由中注册的name同样声明在vue的调用页面中