实现小诺框架(vue2)的iframe缓存。

最新推荐文章于 2025-10-10 09:21:11 发布

原创

最新推荐文章于 2025-10-10 09:21:11 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端 #javascript #vue

文章详细描述了在小诺框架(vue2)中遇到的iframe无法缓存的问题，并提供了一个解决方案，通过标记iframe路由状态，修改`generator-routers.js`中的函数，以及在`src/store/modules/app.js`中添加vuex状态来记录iframe路由。同时，文章还展示了如何在`MultiTab.vue`组件中监听页面变化，管理和更新iframe标签，以及在`PageView.vue`中进行DOM操作，确保iframe的正确显示和隐藏。

使用的小诺框架 vue2 版本

https://gitee.com/xiaonuobase/snowy/tree/v1.7.0/

TODO: 是提示要添加的内容在这里！

问题：

小诺框架是iframe直接加载的，导致无法缓存。

使用iframe导入其他页面的时候。会出现无法缓存的问题。

解决方案：

需要缓存的iframe 不进行删除处理。

在src\router\generator-routers.js添加函数。并替换listToTree函数的内容。替换generator函数

/**
 * 标记路由状态
 * @param item 路由信息
 */
function markIframeTags(item) {
  if (item.component == 'Iframe') {
    item.meta['__isIframe'] = true
  }
}

/**
 * 数组转树形结构
 * @param list 源数组
 * @param tree 树
 * @param parentId 父ID
 */
const listToTree = (list, tree, parentId) => {
  list.forEach(item => {
    // 判断是否为父级菜单
    // eslint-disable-next-line eqeqeq
    // TODO:
    markIframeTags(item)
    if (item.pid == parentId) {
      const child = {
        ...item,
        key: item.key || item.name,
        children: []
      }
      // 迭代 list， 找到当前菜单相符合的所有子菜单

      listToTree(list, child.children, item.id)
      // 删掉不存在 children 值的属性
      if (child.children.length <= 0) {
        delete child.children
      }
      // 加入到树中
      tree.push(child)
    }
  })
}
export const generator = (routerMap, parent) => {
  return router