element+vue之 路由嵌套 iframe

第一步 router.js

/* eslint-disable */
import Vue from 'vue'
import Router from 'vue-router'
import Error from "./../views/500";
import Index from "@/views/Home/Index";
import Login from "./../views/Login";
import Home from "./../views/Home";
import NotFount from './../views/404'
import IFrame from "@/views/IFrame/IFrame"
import store from '@/store'
import api from "../http/api"
import routesChildren from "./baseRoutes"
import {
    
    
 FRreportUrl
} from '@/utils/global'

Vue.use(Router)
const routes = [
  {
    
    
   path: "/",
   component: Home,
   name: "Home",
   meta: {
    
    
    title: "首页"
   },
   children:routesChildren
  },
  {
    
    
   path: "/Login",
   name: "Login",
   component: Login
  },
  {
    
    
   path: "/Error",
   name: "Error",
   component: Error
  }
 ];
var router = new Router({
    
    
 routes
})
router.onReady(()=>{
    
    
  addDynamicMenuAndRoutes({
    
    
    resultHide:true
  })
})

router.beforeEach((to, from, next) => {
    
    
 // 登录界面登录成功之后，会把用户信息保存在会话
 // 存在时间为会话生命周期，页面关闭即失效。
 let token = localStorage.getItem('token' + localStorage.getItem("urlHerf"))
 if (token) {
    
    
  next()
  handleIFrameUrl(to.meta.link, to.name)
 } else {
    
    
  if (to.path === '/login') {
    
    
   next()
  } else {
    
    
   next({
    
    
    path: '/login'
   })
  }
 }
})
/**
 * 加载动态菜单和路由
 */
export async function addDynamicMenuAndRoutes(opts) {
    
    
  opts = opts || {
    
    resultHide:false}
  await addPermsButton(opts);
  const menuListRes =  await api.menu.queryWithoutButton({
    
    platform: 39})
  let menuList = menuListRes.data.data
  const finereportRes = await api.warehouse.reportTemplate()
  menuList = createMenuList(menuList,finereportRes.data.data)
  store.commit('setNavTree', menuList)
  updateRoutes(menuList)
}
function updateRoutes(menuList){
    
    
  if(menuList.length>0){
    
    
    let dynamicRoutes = addDynamicRoutes(menuList)

    dynamicRoutes.push({
    
    
      path: '*',
      name: 'NotFound',
      component: NotFount
     })
     console.log(dynamicRoutes);
    // 处理静态组件绑定路由
    handleStaticComponent(router, dynamicRoutes)
    dynamicRoutes.forEach(item=>{
    
    
      router.addRoute('Home', item)
    })
  }
}
export async function addPermsButton({
     
     resultHide}){
    
    
  const res = await api.menu.queryButton({
    
     platform: 39 },resultHide);
  const elements = res.data.data;
  let ButtonArr = [];
  for (let index = 0; index < elements.length; index++) {
    
    
   const element = elements[index];
   ButtonArr.push(element.perms)
  }
  // 保存用户权限标识集合
  store.commit('setPerms', ButtonArr)
}
/*
 * 处理路由到本地直接指定页面组件的情况
 * 比如'概览'是要求直接绑定到'Main'页面组件
 */
function handleStaticComponent(router, dynamicRoutes) {
    
    
 for (let j = 0; j < dynamicRoutes.length; j++) {
    
    
  if (dynamicRoutes[j].name == '概览') {
    
    
   dynamicRoutes[j].component = Index
   break
  }
 }
 store.commit('setRouter', [...routesChildren,...dynamicRoutes])
}
/*
 * 处理IFrame嵌套页面
 */
function handleIFrameUrl(path, name) {
    
    
 let url = path

 store.commit('setIFrameUrl', url)
 store.commit('setIFrameName', name)

}
/*
 * 添加动态(菜单)路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function addDynamicRoutes(menuList = [], routes = []) {
    
    
 var temp = []
 for (var i = 0; i < menuList.length; i++) {
    
    

  if (menuList[i].children && menuList[i].children.length >= 1) {
    
    
   temp = temp.concat(menuList[i].children)
  } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
    
    
   menuList[i].url = menuList[i].url.replace(/^\//, '')
   // 创建路由配置
   if (menuList[i].link) {
    
    
    var route = {
    
    
     path: menuList[i].url,
     component: IFrame,
     name: IFrame,
     title: menuList[i].menuName,
     meta: {
    
    
      title: menuList[i].menuName,
      icon: menuList[i].icon,
      index: menuList[i].menuId,
      name: 'iframe',
      link: menuList[i].link,
      parentMPName: menuList[i].parentMPName
     }
    }
   } else {
    
    
    var str = ''
    if (menuList[i].url.search('/') !== -1) {
    
    
     let arr = menuList[i].url.split('/')
     str = arr[arr.length - 1]
    } else {
    
    
     str = menuList[i].url
    }
    var route = {
    
    
     path: menuList[i].url,
     component: IFrame,
     name: str.substring(0, 1).toUpperCase() + str.substring(1),
     title: menuList[i].menuName,
     meta: {
    
    
      title: menuList[i].menuName,
      icon: menuList[i].icon,
      index: menuList[i].menuId,
      name: str.substring(0, 1).toUpperCase() + str.substring(1),
      link: menuList[i].link,
      parentMPName: menuList[i].parentMPName
     }
    }
   }
   try {
    
    
    // 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储
    // 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",否则组件加载不到
    let array = menuList[i].url.split('/')
    let url = ''
    for (let i = 0; i < array.length; i++) {
    
    
     url += array[i].substring(0, 1).toUpperCase() + array[i].substring(1) + '/'
    }
    url = url.substring(0, url.length - 1)
    if (url.indexOf("IFrame/IFrame") != -1) {
    
    
     route['component'] = resolve => require([`@/views/IFrame/IFrame`], resolve)
    } else {
    
    
     route['component'] = resolve => require([`@/views/${
      
      url}`], resolve)
    }
   } catch (e) {
    
    }
   routes.push(route)
  }
 }
  if (temp.length >= 1) {
    
    
  addDynamicRoutes(temp, routes)
 } 
 return routes
}
function createFinereportRoutes(menuList){
    
    
  let statement = []
  for (let i = 0; i < menuList.length; i++) {
    
    
    const element_ = menuList[i];
    var children = []
    if(element_.templateVoList){
    
    
      for (let j = 0; j < element_.templateVoList.length; j++) {
    
    
        const element2 = element_.templateVoList[j];
        children.push({
    
    
        children: null,
        enable: 1,
        icon: "",
        menuId: Number('11111' + i + j),
        menuName: element2.templateName,
        menuPermissionOrder: j,
        menuPermissionType: 36,
        menuPermissionTypeName: "菜单",
        parentMPName: "测试",
        parentMPid: Number('9999999' + j),
        perms: "",
        platform: 39,
        url: 'IFrame/IFrame' + i + j,
        link: FRreportUrl + '?viewlet=' + element2.templateUrl,
        })
      }
      statement.push({
    
    
        enable: 1,
        icon: "",
        menuId: Number('9999999' + i),
        menuName: element_.templateClass,
        menuPermissionOrder: i,
        menuPermissionType: 35,
        menuPermissionTypeName: "目录",
      //  parentMPName: "系统管理",
        parentMPid: 211,
        perms: "",
        platform: 39,
        url: '' + i,
        children: children,
      })

    }
   
  }
  return statement
}
function createMenuList(menuList,finereportRes){
    
    
  let menuArr=[]
  for (let index = 0; index < menuList.length; index++) {
    
    
    const element = menuList[index];
  // 动态生成帆软菜单
    if (element.menuId == 211) {
    
    
     element.children = createFinereportRoutes(finereportRes)
    }
    menuArr.push(element)
  }
  return menuArr
}
export default router

第二步 在view 下建一个IFrame》》IFrame.vue页面

<template>
    <div class="iframe-container">
        <iframe :src="src" scrolling="auto" frameborder="0" class="frame" :onload="onloaded()">
        </iframe>
    </div>
</template>

<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      src: '',
      loading: null
    }
  },
  methods: {
    
    
  // 获取路径
    resetSrc: function (url) {
    
    
      this.src = url
      console.log(url)
      this.load()
    },
    load: function () {
    
    
      this.loading = this.$loading({
    
    
        lock: true,
        text: 'loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
        // fullscreen: false,
        target: document.querySelector('#main-container ')
      })
    },
    onloaded: function () {
    
    
      if (this.loading) {
    
    
        this.loading.close()
      }
    }
  },
  mounted () {
    
    
    this.resetSrc(this.$store.state.iframe.iframeUrl)
  },
  watch: {
    
    
    $route: {
    
    
      handler: function (val, oldVal) {
    
    
      // 如果是跳转到嵌套页面，切换iframe的url
        this.resetSrc(this.$store.state.iframe.iframeUrl)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.iframe-container {
    
    
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;;
  bottom: 0px;
  .frame {
    
    
    width: 100%;
    height: 100%;
  }
}
</style>

第三步 在store 文件下建一个iframe.js 文件

export default {
    
    
  state: {
    
    
    iframeUrl: [], // 当前嵌套页面路由路径
    iframeUrls: [] // 所有嵌套页面路由路径访问URL
  },
  getters: {
    
    },
  mutations: {
    
    
    setIFrameUrl (state, iframeUrl) {
    
     // 设置iframeUrl
      state.iframeUrl = iframeUrl
    },
    addIFrameUrl (state, iframeUrl) {
    
     // iframeUrls
      state.iframeUrls.push(iframeUrl)
    },
    setIFrameName (state, iframeUrl) {
    
     // iframeUrls
      state.setIFrameName= iframeUrl
    }
  },
  action: {
    
    }
}