若依框架前端切换TagView时刷新问题

这篇具有很好参考价值的文章主要介绍了若依框架前端切换TagView时刷新问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

若依框架点击顶部tag切换时,永远都是刷新的。刷新问题两种情况:普通view切换时刷新及iFrame切换刷新
一、普通view切换时刷新

原因是view的name与在菜单填写的大小写不一致,按若依框架规则,路由地址必须写为 camel 驼峰命名形式,组件名称必须写为 pascal首字母全大写的形式。

参考:若依 | 点击顶部 tag 标签不自动刷新 - shayloyuki - 博客园

ruoyi 切换标签 刷新页面,Javascript,前端,javascript,vue.js

ruoyi 切换标签 刷新页面,Javascript,前端,javascript,vue.js

二、iFrame切换刷新问题

 原因是iframe无法通过keep-alive缓存内容节点,每次都需要重新渲染刷新,iframe中keep-alive机制失效原因:iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的。

参考:1.vue中keep-alive对引入iframe的页面无效,实现iframe页面缓存问题_vue iframe 缓存_ll7425的博客-CSDN博客

2.GitHub - jmx164491960/vue-iframe-demo: 在vue中实现iframe keep-alive

解决思路:
route-link点击切换时用route-view渲染呈现,若component为空时则不呈现,可以增加一个iframe组件在route-view旁边,同时监听路由,若是需要iframe呈现则显示,置空component,并给予iframe的src链接就完成呈现,再控制切换时用v-show控制显示当前路由即可。

改造若依步骤:
1.在获取路由时,判断iframe标识的置空component,打开文件src\store\modules\permission.js

ruoyi 切换标签 刷新页面,Javascript,前端,javascript,vue.js

 ruoyi 切换标签 刷新页面,Javascript,前端,javascript,vue.js

ruoyi 切换标签 刷新页面,Javascript,前端,javascript,vue.js

2.改造route-view呈现iframe内容 (暂时没空分析,不懂的加好友提问吧,把代码贴上来)

修改文件src\layout\components\AppMain.vue

<template>

  <section class="app-main">

    <transition name="fade-transform" mode="out-in">

      <keep-alive :include="cachedViews">

        <router-view :key="key" />

      </keep-alive>

    </transition>

    <!-- iframe页 -->

    <iframe v-for="item in componentsArr" :ref="item.name" :id="item.name" frameborder="no"

      :style="'width: 100%; height:' +height" scrolling="auto" v-show="$router.currentRoute.path.endsWith(item.path)"/>

  </section>

</template>



<script>

import Cookies from "js-cookie";



export default {

  name: "AppMain",

  data() {

    return {

      componentsArr: [],

      height: document.documentElement.clientHeight - 94.5 + "px;",

    };

  },

  created() {

    // 设置iframe页的数组对象

    const componentsArr = this.getComponentsArr();    

    this.componentsArr = componentsArr;

    // 判断当前路由是否iframe页

    setTimeout(() => {

      this.isOpenIframePage();

    }, 200);    

  },

  mounted: function () {

    setTimeout(() => {

      this.loading = false;

    }, 300);

    const that = this;

    window.onresize = function temp() {

      that.height = document.documentElement.clientHeight - 94.5 + "px;";

    };

  },

  computed: {

    cachedViews() {

      return this.$store.state.tagsView.cachedViews;

    },

    key() {

      return this.$route.path;

    },    

  },



  watch: {

    $route() {

      // 判断当前路由是否iframe页

      this.isOpenIframePage();

    },

  },

  methods: {

    // 根据当前路由设置hasOpen

    isOpenIframePage() {  

      debugger;  

      var path = this.$router.currentRoute.path.split("/").pop();      

      var iframe=this.$refs[path];

      if(iframe)

      {

        iframe=iframe[0];

      }

      if (iframe&&!iframe.isbindsrc) {

        this.code = this.$router.currentRoute.query.code;

        let menuId = this.$router.currentRoute.meta.menuId;

        let uuid = Cookies.get("uuid");

        let menuCode = this.$router.currentRoute.meta.menuCode;

        let link =

          this.$router.currentRoute.meta.frameAddress ||

          "/yizumiapi/yisee/tabs2";

        if (link.indexOf("?") >= 0) {

          link += "&";

        } else {

          link += "?";

        }

        let url =

          link + "menuId=" + menuId + "&uuid=" + uuid + "&mcode=" + menuCode;



          iframe.src = url;

          iframe.isbindsrc="true"

      }

    },

    // 遍历路由的所有页面,把含有iframeComponent标识的收集起来

    getComponentsArr() {

      const routers = this.$store.state.permission.iframeRoutes; //this.$router;

      //const routers = router.options.routes;

      var iframeMenus = [];

      var genMenus = (routes) => {

        routes.forEach((item, index) => {

          if (item.meta && item.meta.frameAddress) {

            var it = Object.assign(item);

            delete it.children;           

            iframeMenus.push(it);

          }

          if (item.children) {

            genMenus(item.children);

          }

        });

      };



      genMenus(routers);

      return iframeMenus;

    },

  },

};

</script>



<style lang="scss" scoped>

.app-main {

  /* 50= navbar  50  */

  min-height: calc(100vh - 50px);

  width: 100%;

  position: relative;

  overflow: hidden;

}



.fixed-header+.app-main {

  padding-top: 50px;

}



.hasTagsView {

  .app-main {

    /* 84 = navbar + tags-view = 50 + 34 */

    min-height: calc(100vh - 84px);

  }



  .fixed-header+.app-main {

    padding-top: 84px;

  }

}

</style>



<style lang="scss">

// fix css style bug in open el-dialog

.el-popup-parent--hidden {

  .fixed-header {

    padding-right: 17px;

  }

}

</style>

src\store\modules\permission.js 代码文章来源地址https://www.toymoban.com/news/detail-791482.html

import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router'
import { getRouters } from '@/api/menu'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink'


const permission = {
  state: {
    routes: [],
    addRoutes: [],
    defaultRoutes: [],
    topbarRouters: [],
    sidebarRouters: [],
    iframeRoutes: [],
  },
  mutations: {
    SET_ROUTES: (state, routes) => {     
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    },
    SET_DEFAULT_ROUTES: (state, routes) => {
      state.defaultRoutes = constantRoutes.concat(routes)
    },
    SET_TOPBAR_ROUTES: (state, routes) => {
      state.topbarRouters = routes
    },
    SET_SIDEBAR_ROUTERS: (state, routes) => {
      state.sidebarRouters = routes
    },
    SET_IFRAME_ROUTERS: (state, routes) => {
      state.iframeRoutes = routes
    },
  },
  actions: {
    // 生成路由
    GenerateRoutes({ commit },appId) {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters(appId).then(res => {
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })         
          router.addRoutes(asyncRoutes);
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
          debugger;         
          commit('SET_IFRAME_ROUTERS', iframeRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }
}
var iframeRoutes=[];
// 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
  return asyncRouterMap.filter(route => {
    if (type && route.children) {
      route.children = filterChildren(route.children)
    }
    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else if (route.component === 'ParentView') {
        route.component = ParentView
      } else if (route.component === 'InnerLink') {
        route.component = InnerLink
      } else {
        if(route.meta&&route.meta.frameAddress)
        {
          route.component=undefined;
          if(iframeRoutes.filter(c=>c.name==route.name).length==0)
          {iframeRoutes.push(route)}
        }
        else{
        route.component = loadView(route.component)
        }
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children, route, type)
    } else {
      delete route['children']
      delete route['redirect']
    }
    return true
  })
}

function filterChildren(childrenMap, lastRouter = false) {
  var children = []
  childrenMap.forEach((el, index) => {
    if (el.children && el.children.length) {
      if (el.component === 'ParentView' && !lastRouter) {
        el.children.forEach(c => {
          c.path = el.path + '/' + c.path
          if (c.children && c.children.length) {
            children = children.concat(filterChildren(c.children, c))
            return
          }
          children.push(c)
        })
        return
      }
    }
    if (lastRouter) {
      el.path = lastRouter.path + '/' + el.path
    }
    children = children.concat(el)
  })
  return children
}

// 动态路由遍历,验证是否具备权限
export function filterDynamicRoutes(routes) {
  const res = []
  routes.forEach(route => {
    if (route.permissions) {
      if (auth.hasPermiOr(route.permissions)) {
        res.push(route)
      }
    } else if (route.roles) {
      if (auth.hasRoleOr(route.roles)) {
        res.push(route)
      }
    }
  })
  return res
}

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

export default permission

到了这里,关于若依框架前端切换TagView时刷新问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ruoyi若依前后端分离框架【若依登录详细过程】

    后端包含ruoyi-admin,ruoyi-common,ruoyi-framework等多个模块,ruoyi-admin为启动模块。先看一下ruoyi-admin/src/main/application.yml配置文件。 指定了服务端启动的端口8080。我们运行ruoyi-admin/src/main/java/com/ruoyi/ RuoYiApplication.java即可启动后端,监听8080端口。 我们回到前端的登录界面。 views

    2024年02月05日
    浏览(65)
  • 若依框架 --- ruoyi 表格的设置

    表格 字典值转换 (1) 方式1:使用字典枚举的方式 (2) 方式2:自定义方法处理,在自定义方法中根据输入值返回指定内容 表格 设置单选/多选 单选/多选通过首列属性控制: 表格 添加 tooltips 表格自带 tooltips 功能,如下方式使用: 但是自带的 tooltips 显示可能存在下面的问题:

    2024年02月05日
    浏览(49)
  • 若依(Ruoyi)前后端分离版项目部署到服务器(Linux环境)后,刷新页面报错:404 Not Found

    原文章: 若依(ruoyi)前后端分离版使用教程之若依后端部署阿里云服务器步骤(超详细)_蓝多多的小仓库的博客-CSDN博客 问题:         在若依项目部署服务器后,可以正常运行,但如果执行刷新页面操作,便会出现404 Not Found。 原因:         Nginx未正确配置。由

    2024年02月17日
    浏览(56)
  • 若依框架(ruoyi)路由配置 菜单配置 动态路由

    若依框架(ruoyi)后台路由配置 菜单配置 动态路由: 路由全部是在 菜单管理里面配置:   类目:     公共路由: 网址: /activiti/reviewTasks/review/party_org/123 每一条地址:  http://localhost/activiti/reviewTasks/review/party_political_talk/249      

    2024年02月11日
    浏览(40)
  • 若依(ruoyi)框架:如何实现灵活自定义路由配置

    随着项目的深入开发,我们可能会对路由做特殊化处理。比如:访问路由A时需要传入routerType=A,前端会根据routerType=A做一些特殊的处理。 这种方法可用于公共路由或固定路由中,而现实开发过程中我们经常遇到的对某个菜单路由的做特殊化处理。还有经常遇到对动态路由的

    2024年01月17日
    浏览(41)
  • ruoyi 若依 前端vue npm install 运行vue前端

    1. 安装jdk ​​​​​​​https://blog.csdn.net/torpidcat/article/details/90549551 2. nginx https://blog.csdn.net/torpidcat/article/details/97934302 3. mysql https://blog.csdn.net/torpidcat/article/details/110265490 4. redis https://blog.csdn.net/torpidcat/article/details/123021796 =================================== 首次导入,需要先执行 np

    2024年01月25日
    浏览(56)
  • ruoyi若依前端请求接口超时,增加响应时长

    前端查询请求超时 找到request.js的timeout属性由10秒改成了20秒,因为默认是10秒,请求肯定是超出了10秒 建议:在此请求检查是否有需要优化的SQL,因为已经超出了正常响应时间,所以改时间治标不治本

    2024年01月21日
    浏览(44)
  • vue 前端 + 若依(ruoyi)后端 实现国际化

    记录一下,前端使用vue,后端使用若依(ruoyi,基于spring-boot)实现页面,后端返回提示信息国际化 vue:2.6.12 vue-i18n:^8.27.2 安装vue-i18n,注:最新的交于该版本有差异,所以指定使用版本:8.27.2 添加国际化js文件:language.en_US.js 添加国际化js文件:language.zh_CN.js 添加i18n.js ma

    2024年02月12日
    浏览(51)
  • 若依框架RuoYi项目运行启动教程【傻瓜式教程】

    💂 个人网站:【紫陌】【笔记分享网】 💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】 若依官网 若依在线文档 首先去官网下载代码 链接到码云下载,要么用git下载要么压缩包下载。 然后再IDEA打开项目 想要运行就要搭建好环境 按照文档要求配置环

    2023年04月17日
    浏览(42)
  • java若依框架ruoyi导入Excel(附详细代码)

    【版权所有,文章允许转载,但须以链接方式注明源地址,否则追究法律责任】 【创作不易,点个赞就是对我最大的支持】 仅作为学习笔记,供大家参考 总结的不错的话,记得点赞收藏关注哦! Excel导入 可能出现的问题 1. 开发模板下载功能(如需定制列,可以单独创建一

    2024年01月23日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包