位置: 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实战)

  • 房产税什么时候落地
  • 增值税普通发票查询真伪
  • 退票凭证什么样子
  • 企业所得税季度预缴
  • 政府补助属于不征收收入汇算清缴怎么填写
  • 红字专票进项税额如何做
  • 预缴税款如何抵扣苗木款
  • 电子发票作废了还能恢复吗
  • 税前薪酬包括五险一金吗
  • 单位租个人房屋怎么开票
  • 资本公积是啥
  • 债权投资的账务处理步骤
  • 单位收到社保补缴通知书后怎么办
  • 海关进口增值税怎么认证抵扣
  • 收据大写要写整吗
  • 企业购买设备可以税前扣除吗
  • 收回应收账款资产为什么不变
  • 主营业务成本怎么算出来的
  • 培训机构收一年费用合法吗
  • 基本户和一般户的区别和用途
  • win10外接音响没反应
  • 笔记本windows10截屏
  • 车间租金计入什么会计科目
  • 固定资产进项发票
  • 收到对方公司开的发票怎么做账
  • windows 7怎么打开虚拟化
  • 下一页分页符中间空白页
  • 增值税的类型主要有哪些
  • 土方工程公司账务实例
  • 企业所得税的缴费基数
  • 非正常损失可以税前扣除吗
  • elementui input无法输入
  • 局部规划算法
  • 传承古老文化
  • 预提费用的会计分录2018
  • 会计人员报销差旅费应该给谁审核呢
  • 汽车上牌照的费用计入什么会计科目
  • 帝国cms升级到7.5后不能发布内容信息
  • db2 knowledge center
  • mysqldump导入数据库
  • 发票开预付卡充值可以计入费用吗
  • 印花税都有什么类目
  • mysql操作步骤
  • 酒店客房成本计算公式
  • 赠送商品入什么科目
  • 临时工受伤赔偿怎么做账
  • 固定资产入账怎么做凭证和入资产卡片?
  • 存货价值的计算公式
  • 银行开户的费用计入什么科目
  • 暂估入库的税务怎么处理
  • 税务局多扣的税可以退吗
  • 无固定合同有哪些好处
  • 收购分公司有什么要求
  • 可供分配利润是未分配利润吗
  • 展位费按多少税率
  • 跨年取得的发票
  • 发票打印格式调整方法
  • 外资房地产企业 利润汇出比例
  • 桌面预览
  • win7清理系统垃圾的方法
  • Windows Server 2008中安装DNS服务器详细图文教程
  • win10打开软件提示允许此应用对你设备进行更改
  • mac 菜单
  • 安装和配置eclipse集成开发环境
  • .exe是什么软件
  • centos 7 安装
  • mssearch.exe - mssearch是什么进程 有什么用
  • win7与xp双系统设置
  • win7系统黑屏但电脑一直在运行
  • 腾讯电脑管家免费安装下载
  • opengl visual studio
  • 数组observer
  • bat脚本ftp上传文件
  • 用jquery制作网页
  • 批处理清除保留扇区
  • js每天的定时任务
  • 各地市的税务局有哪些
  • 已经交完费还可以用医保卡报销吗
  • 钢管租赁可以开建筑材料吗
  • 2021河南税务政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设