首页 > 其他分享 >vue-element-admin项目中tagView嵌入iframe不刷新重载

vue-element-admin项目中tagView嵌入iframe不刷新重载

时间:2023-08-22 12:00:38浏览次数:42  
标签:vue admin route tagView element iframe 重载

vue-element-admin项目中tagView嵌入iframe不刷新重载

最近使用vue-element-admin来开发项目,因为以前老项目太大,暂不重构,如要通过iframe嵌套在新项目中,通过router来重写url加载,但是业务需要切换菜单或者tagView不能刷新重载iframe页面,因此需要改造

一、vue-element-admin是通过keep-alive来缓存router-view组件内容,但是其router-view中的iframe是重新通过src加载,相当于iframe重载

- 解决方案:
 - iframe组件不走keep-alive和router-view,而是一直处在body中
 ```
 // AppMain.vue
 <transition name="fade-transform" mode="out-in">
  <!-- iframe不走重新加载,而是隐藏,保证重载, isIframePage 通过router.meta.type字段来判断-->
  <template v-if="isIframePage">
    <iframe-contain />
  </template>
  
  <template v-else>
    <keep-alive :include="cachedViews" :exclude="notCachedViews">
      <router-view :key="key" />
    </keep-alive>
  </template>

</transition>
 ```

二、监听$route,收集iframe消息,存入Array中,通过当前路由来展示和隐藏

- 解决方案:
```
// iframeContain.vue
  <div class="iframe-contain">
	<el-card class="iframe-contant el-card-8">
	  <iframe 
		v-show="curIframeName === item.name" 
		v-for="item in iframeUrlArr" 
		:key="item.name " 
		id="frameBox" 
		:src="item.url" 
		class="frame-box" />
	</el-card>
  </div>
  
  // script
  import { uniqBy } from 'lodash';
  data() {
	  curIframeName: '', // 当前iframe名称,唯一值
	  iframeUrlArr: [], // 收集所有打开的iframe
  },
  watch: {
	$route: {
	  handler: function(route) {
		console.log('路由', route, this)
		this.curIframeName = route.name;
		this.iframeUrlArr.push({
		  name: route.name,
		  url: window.location.origin + (route.meta.specialUrl || route.path), // 根据自己项目来写
		})

		// 去重,可自己写方法Object.keys, includes, push
		this.iframeUrlArr = uniqBy(this.iframeUrlArr, 'name')
	  },
	  immediate: true
	}
  },
```

标签:vue,admin,route,tagView,element,iframe,重载
From: https://www.cnblogs.com/cp-cookie/p/17648206.html

相关文章

  • vue实现‘换一批’功能
    实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组<divclass="flex-align"@click="change"><span>换一批</span></div>data(){return{qList:[],//处理后的list......
  • Web_PHP_DedeCMS_忘记后台admin密码怎么办?
    1、进入mysql修改进入mysql对应数据库,找到dede_admin表,用c3949ba59abbe56e057f代替admin原有的密码并保存,这时admin的密码就重设为123456;2、无法进入数据库,或者无法进入空间管理地址,那么这种情况,应该如何解决这个问题呢?解决方法:复制链接http://pan.baidu.com/share/link?shar......
  • 使用Vue.js构建交互式的前端应用
    引言Vue.js是一种流行的JavaScript框架,用于构建交互式的前端应用程序。它具有简单易用的API和灵活的组件化架构,使开发人员能够快速构建高效的用户界面。什么是Vue.js?Vue.js是一种用于构建用户界面的开源JavaScript框架。它采用了MVVM(Model-View-ViewModel)架构模式,通过数据绑定和......
  • VUE3单页面应用开发常用工具
    Vite一种新型的前端构建工具,它主要由两个部分做成一个开发服务器,它基于 原生ES模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。社区模......
  • vue_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件
    今天写的一个搜索框,要求输入字符时不作处理,直到用户点击搜索按钮时才执行搜索逻辑;当用户将搜索框文本删除至空字符串时,执行一次无搜索值的搜索逻辑,用于将表格数据恢复至无筛选;在这个功能上我想当然地使用了input事件用于触发输入事件,但是被测试出bug:当输入法是......
  • VUE element-ui之table表格全局排序
    一调用后端接口排序功能步骤:标签中定义排序方法:<el-tableref="reset"v-loading="loading":data="tableData"height="520"border@sort-change="sortChange">要排序的字段......
  • vue实现简单表单收集
    vue实现简单表单收集实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><scriptsrc="......
  • vue3 watch 监听响应式数据变化 改变img的src
    目标:用一个图片来监视全局websocket对象的连接状态  全局websocket的写法详见:https://www.cnblogs.com/hailexuexi/p/17577818.htmlmain.js全局对象 websocket的连接状态//全局对象constglobalData=reactive({ websockStatus:"open",})app.provide('globalData',......
  • vscode 快捷键生成vue模板
    vscode快捷键生成vue模板教程我们在开发vue项目时,需要一个vue模版,去创建一个组件,可以使用快捷键1.文件--》首选项--》用户片段2.搜索vue选择3.模板内容填充{"Printtoconsole":{"prefix":"vue","body":["<template>",......
  • 在Vue3后台管理系统中使用watch和watcheffect
    ​ 1、watch在Vue3中的组合式API中,watch的作用和Vue2中的watch作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。constmessage=ref("test");watch(message,(newValue,oldValue)=>{console.log("新值:",ne......