vue门户网站简单记录

项目要求

公司要求要一个门户网站，里面放入其他系统，当作子系统，经过研究我决定用iframe嵌套的方式把子系统嵌套入门户网站。

重点记录

登录，路由跳转等，正常写就可以，主要是主页嵌套子系统。

导航

导航路由替换为子系统页面路径，导航路径根据用户权限返回。
前端定义菜单格式为：

let currentMenu = [
              {
                id: '1', // 唯一标识
                title: '权限管理系统', //tab 页上展示的名称
                children: [
                  {
                    id: '1-1',
                    title: '用户信息管理',
                    icon: 'el-icon-folder-opened',
                    component: '',
                    url: '',
                    children: [
                      {
                        id: '1-1-1',
                        title: '用户信息查询',
                        icon: 'el-icon-folder-opened',
                        component: '',
                        url:
                          'http://127.0.0.1:8002/userInfoManage.html#/userInfoQuery',
                        children: null
                      }
                    ]
                  },
                  {
                    id: '1-2',
                    title: '权限管理',
                    icon: 'el-icon-folder-opened',
                    component: '',
                    url: '',
                    children: [
                      {
                        id: '1-2-1',
                        title: '角色信息查询',
                        icon: 'el-icon-folder-opened',
                        component: '',
                        url: 'http://127.0.0.1:8002/authorityMange.html#/role',
                        children: null
                      }
                    ]
                  },
                  {
                    id: '1-3',
                    title: '安全审计',
                    icon: 'el-icon-folder-opened',
                    component: '',
                    url: '',
                    children: [
                      {
                        id: '1-3-1',
                        title: '审计日志查询',
                        icon: 'el-icon-folder-opened',
                        component: '',
                        url:
                          'http://127.0.0.1:8002/safetyAudit.html#/auditLogQuery',
                        children: null
                      }
                    ]
                  }
                ]
              }
            ]

页面展示区

正常vue项目登陆后，页面展示区是router-view展示出来的，门户网站我替换为iframe方式展示，根据点击的不同菜单传入的url展示不同页面，可以放入ui库里tabs下，缓存页面。

父子通信

门户网站与子系统传参方式：
1、父传子

mounted() {
    this.propInfo()
  },
  methods: {
    propInfo() {
      let Frame = this.$refs['iframe'] //这里是DOM，我这里是vue获取方法，其他获取DOM请自行替换
      var obj = JSON.parse(localStorage.getItem('userInfo')) //想要传的参数  我这是所有用户信息
      if (Frame.attachEvent) {
        //兼容浏览器判断，绑定加载事件
        Frame.attachEvent('onload', function() {
          let iframeWin = Frame.contentWindow
          iframeWin.postMessage(obj, '*')
          //obj传递的参数   https://xxxx.xx.xx写成子页面的域名或者是ip，星号代表去任何子页面都会传递，
            我这传递的是登录信息。
        })
      } else {
        Frame.onload = function() {
          let iframeWin = Frame.contentWindow
          iframeWin.postMessage(obj, '*')
        }
      }
    },
    }

子页面接收：

window.onmessage = function(event) {
  if(event.data &&event.data.token){
    localStorage.setItem('buttonList', JSON.stringify(event.data.buttonList))
    localStorage.setItem('token', JSON.stringify(event.data.token))
    localStorage.setItem('userInfo', JSON.stringify(event.data.userInfo))
  }
}

2、子传父

window.parent.postMessage(obj, "*")

父页面接收：

window.onmessage = function(event){
	console.log(event.data)
}

大概项目思路就是这样，其他根据需求完善功能。