位置: IT常识 - 正文

若依框架前端切换TagView时刷新问题(若依框架用到的技术)

编辑:rootadmin
若依框架前端切换TagView时刷新问题

推荐整理分享若依框架前端切换TagView时刷新问题(若依框架用到的技术),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:若依框架入门,若依框架部署,若依框架入门,若依框架前后端分离,若依框架用到的技术,若依框架前端如何通过后端加载页面,若依框架前端如何通过后端加载页面,若依框架前后端分离,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

二、iFrame切换刷新问题

若依框架前端切换TagView时刷新问题(若依框架用到的技术)

 原因是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

 

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 代码

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
本文链接地址:https://www.jiuchutong.com/zhishi/300076.html 转载请保留说明!

上一篇:计算机视觉基础学习-图像拼接(计算机视觉基础知识)

下一篇:【node进阶】深入浅出前后端身份验证(下)---JWT(node实战)

  • 怎么把qq头像挂件去掉(怎么把qq头像挂件取了)

    怎么把qq头像挂件去掉(怎么把qq头像挂件取了)

  • 照片原图和不是原图的区别(图片不是原图不清晰怎么办)

    照片原图和不是原图的区别(图片不是原图不清晰怎么办)

  • 打开软件提示初始化失败(打开软件提示初始化设置)

    打开软件提示初始化失败(打开软件提示初始化设置)

  • 身份证号码后面的x手机怎么输入(身份证号码后面的x是大写还是小写)

    身份证号码后面的x手机怎么输入(身份证号码后面的x是大写还是小写)

  • 手机屏幕漏白光怎么办(手机屏幕漏白光是内屏坏了吗)

    手机屏幕漏白光怎么办(手机屏幕漏白光是内屏坏了吗)

  • 手机有反应但屏幕不亮怎么办(手机有反应但屏幕不亮怎么修)

    手机有反应但屏幕不亮怎么办(手机有反应但屏幕不亮怎么修)

  • 苹果耳机能免费换几次(苹果耳机免费畅听6个月找不到了)

    苹果耳机能免费换几次(苹果耳机免费畅听6个月找不到了)

  • 苹果se电池耐用吗(iphone se电池续航怎么样)

    苹果se电池耐用吗(iphone se电池续航怎么样)

  • oppo手机升降摄像头是哪一款(oppo手机升降摄像头声音怎么关)

    oppo手机升降摄像头是哪一款(oppo手机升降摄像头声音怎么关)

  • 闲鱼发货要自己包装吗(闲鱼发货要自己包装贴单号吗)

    闲鱼发货要自己包装吗(闲鱼发货要自己包装贴单号吗)

  • 无线路由器连接不上是什么原因(无线路由器连接无线路由器)

    无线路由器连接不上是什么原因(无线路由器连接无线路由器)

  • 华为智慧识屏怎么打开(华为智慧识屏怎么关闭震动)

    华为智慧识屏怎么打开(华为智慧识屏怎么关闭震动)

  • 快手地球探索全球用的是什么软件(快手地球是什么意思)

    快手地球探索全球用的是什么软件(快手地球是什么意思)

  • 华为体脂称wifi版怎么用(华为体脂称wifi版怎么看不到体脂率数据)

    华为体脂称wifi版怎么用(华为体脂称wifi版怎么看不到体脂率数据)

  • 怎么看手机卡上的号码(怎么看手机卡上存的号码)

    怎么看手机卡上的号码(怎么看手机卡上存的号码)

  • 快手买的东西在哪里找(快手买的东西在哪看取件码)

    快手买的东西在哪里找(快手买的东西在哪看取件码)

  • 安卓手机airpods盒子电量怎么看(安卓手机airpods怎么关闭触控)

    安卓手机airpods盒子电量怎么看(安卓手机airpods怎么关闭触控)

  • 苹果手机趣头条为什么没有任务(苹果手机趣头条怎么没有金币)

    苹果手机趣头条为什么没有任务(苹果手机趣头条怎么没有金币)

  • mate20怎么设置熄屏时间(mate20怎么设置灭屏)

    mate20怎么设置熄屏时间(mate20怎么设置灭屏)

  • 苹果xsmax怎样通话录音

    苹果xsmax怎样通话录音

  • 小米手环屏幕解锁(小米手环屏幕解锁有什么用)

    小米手环屏幕解锁(小米手环屏幕解锁有什么用)

  • 【nn.LSTM详解】(nn.lstm输出)

    【nn.LSTM详解】(nn.lstm输出)

  • golang 和java对比(golang 和 java)

    golang 和java对比(golang 和 java)

  • 递延所得税如何影响所得税费用
  • 增值税视同销售账务处理怎么做?
  • 清卡抄税报税顺序
  • 进项税额红字怎么做账
  • 企业按照行业分类为
  • 利润表年度报表
  • 企业隐藏收入会受怎样处罚
  • 土地使用税怎么征收标准
  • 营改增后建筑业怎么开票
  • 分配本月职工薪酬会计分录该怎么做合适?
  • 房屋估价入账需要计算什么税款?
  • 电子商业承兑对方接收了还可以作废吗
  • 评估所得征税方法是一种控制纳税人逃税和避税的措施
  • 增值税的工程服务有哪些
  • 现金存款账户
  • 收到社保局生育津贴
  • 投资利息收入要交所得税吗
  • 小苏打税收分类
  • 纳税人提供植物养护服务按照什么服务缴纳增值税
  • 2021年7月1日执行
  • 小规模纳税人计提增值税账务处理
  • 资金清算款项
  • 计提附加税的会计分录怎么写
  • 小规模给个人开普票怎么填写
  • 员工两处取得工资收入
  • window1020h2更新问题
  • com2us密码找回
  • 预提电费及电费发票到账的会计分录
  • 普通发票的进项票怎么做分录
  • windows10如何更改时间
  • 营业外支出与营业收入之比应小于1%的说明
  • Win7系统电脑c盘什么都没有为什么满了
  • 收到员工违章操作罚款的会计分录
  • 销售货物是什么意思
  • ctrl起什么作用
  • 股东帮企业还款违法吗
  • 竣工结算的依据有哪些?
  • 应付票据抵付应付账款
  • yii2框架运行原理
  • php的execute
  • 免税农产品进项转出计算
  • 递归 php
  • 增值税纳税申报表怎么填
  • 公司的零星开支是什么
  • 个人收入如何开出发票
  • 政府向企业发放用工补贴政策
  • 零申报未申报可以不处罚吗
  • 资源税申报怎么操作
  • SQL Server 2005 模板参数使用说明
  • sql2008收缩日志文件
  • 个人出租房屋需要缴纳个税吗
  • 拍卖车牌收入需要缴纳什么税
  • 个税申报当月申报了上月应发工资怎么调整
  • 平销返利是销售折扣吗
  • 固定资产清理营业外支出可在税前扣除?
  • 权益净利率计算公式产权比率
  • 涉及销售费用如何计算
  • 退回以前年度所得税账务处理
  • 长期借款和长期贷款一样吗
  • 金蝶迷你版为什么打不开
  • 忘交残保金了怎么补交
  • linux bin sbin
  • centos7.6无法远程
  • oracle教程入门
  • sql server 文件
  • ubuntu20.4配置ip
  • imessage对方看了会显示已读吗
  • solaris8+apache2+weblogic813+db2_82客户端+128 安装过程
  • windows8.1显卡驱动
  • onionwormimmune.exe是什么
  • ppap是什么文件
  • 如何将windows 10
  • android游戏开发论文
  • Node.js中的包管理工具是什么
  • 变量js
  • python socket编程教程
  • 优化lr
  • 税务局有哪些职务名称
  • 匈牙利离中国广东有多远
  • 2021税务稽查重点方向
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设