精华内容
下载资源
问答
  • $('#content iframe')....加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);var $div = $('.main-sidebar > .sidebar-menu');$div.on('click', 'li[data-hre...

    $('#content iframe').attr('src',href);

    加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);

    var $div = $('.main-sidebar > .sidebar-menu');

    $div.on('click', 'li[data-href]', function () {

    var href = $(this).data('href');

    if (!!href && href!='undefined') {

    var curSelf = $('#content iframe').attr('src');

    var curPos = curSelf.lastIndexOf('#');

    var curPar = curSelf.substr(curPos);

    var pos = href.lastIndexOf('#');

    var par = href.substr(pos);

    $('#content iframe').attr('src',href);

    if(par != curPar && curPos !=-1){

    document.getElementById('iframe').contentWindow.location.reload(true);

    }

    //菜单增加样式

    if($(this).parents('li').data('href') == undefined){

    $(this).addClass('active');

    $(this).parent('ul').siblings().find('li').removeClass('active');

    }else{

    $(this).parents('li').addClass('active');

    $(this).parents('li').parent('ul').siblings().find('li').removeClass('active');

    }

    }

    return false;

    });

    展开全文
  • 需求一:在一个列表页中,第一次进入的时候,请求...解决方案在App.vue设置:假设列表页为list.vue,详情页为detail.vue,这两个都是子组件。我们在keep-alive添加列表页的名字,缓存列表页。然后在列表页的creat...

    需求一:

    在一个列表页中,第一次进入的时候,请求获取数据。

    点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。

    也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。

    解决方案

    在 App.vue设置:

    假设列表页为 list.vue,详情页为 detail.vue,这两个都是子组件。

    我们在 keep-alive 添加列表页的名字,缓存列表页。

    然后在列表页的 created 函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。

    这样就可以解决问题了。

    需求二:

    在需求一的基础上,再加一个要求:可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。

    我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

    {

    path: '/detail',

    name: 'detail',

    component: () => import('../view/detail.vue'),

    meta: {isRefresh: true}

    },

    这个 meta 属性,可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。

    设置完这个属性,还要在 App.vue 文件里设置 watch 一下 $route 属性。

    watch: {

    $route(to, from) {

    const fname = from.name

    const tname = to.name

    if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {

    from.meta.isRefresh = false

    // 在这里重新请求数据

    }

    }

    },

    这样就不需要在列表页的 created 函数里用 ajax 来请求数据了,统一放在 App.vue 里来处理。

    触发请求数据有两个条件:

    从其他页面(除了详情页)进来列表时,需要请求数据。

    从详情页返回到列表页时,如果详情页 meta 属性中的 isRefresh 为 true,也需求重新请求数据。

    当我们在详情页中删除了对应的列表项时,就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页,页面会重新刷新。

    如果文章对您有帮助,记得动动手指关注我哟

    展开全文
  • 需求一:在一个列表页中,第一次进入的时候,请求获取数据。...解决方案在App.vue设置:1 2 3 假设列表页为list.vue,详情页为detail.vue,这两个都是子组件。我们在keep-alive添加列表页的名字,...

    需求一:

    在一个列表页中,第一次进入的时候,请求获取数据。

    点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。

    也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。

    解决方案

    在App.vue设置:

    1

    2

    3

    假设列表页为 list.vue,详情页为 detail.vue,这两个都是子组件。

    我们在keep-alive 添加列表页的名字,缓存列表页。

    然后在列表页的 created 函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。

    这样就可以解决问题了。

    需求二:

    在需求一的基础上,再加一个要求:可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。

    我们可以在路由配置文件上对 detail.vue 增加一个meta 属性。

    1 {

    2 path: '/detail',

    3 name: 'detail',

    4 component: () => import('../view/detail.vue'),

    5 meta: {isRefresh: true}

    6 },

    这个meta 属性,可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。

    设置完这个属性,还要在 App.vue 文件里设置 watch 一下 $route 属性。

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    1 watch: {

    2 $route(to, from) {

    3 const fname = from.name

    4 const tname = to.name

    5 if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {

    6 from.meta.isRefresh = false

    7 // 在这里重新请求数据

    8 }

    9 }

    10 },

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    这样就不需要在列表页的 created 函数里用 ajax 来请求数据了,统一放在 App.vue 里来处理。

    触发请求数据有两个条件:

    从其他页面(除了详情页)进来列表时,需要请求数据。

    从详情页返回到列表页时,如果详情页 meta 属性中的 isRefresh 为 true,也需求重新请求数据。

    当我们在详情页中删除了对应的列表项时,就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页,页面会重新刷新。

    vue-router:meta标签配置

    先来看下官网链接:

    其实官网链接给的介绍并不多,只是介绍了获取meta的方法。

    那么我们一般使用meta来做什么处理呢?

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    其实最主要的一个,我个人认为是携带页面一些特殊的标志,或者信息。

    比如我们上边介绍到的页面数据刷新,以及页面显示,并且可以控制页面内特殊dome。

    下面给大家介绍下,我在开发过程中使用到meta,来设置每个子组件的全局背景颜色。

    还有一个重要的就是,配置面包屑。

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    meta配置各个页面的背景色

    1.首先,我们在路由里边配置meta字段信息。

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    1 {

    2 path: '/Hr-index/home',

    3 name: 'home',

    4 meta: [{

    5 color:"#f2f2f2",

    6 }],

    7

    8 component: resolve => require(['文件路径'], resolve),

    9 }

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    大家可以看到,我在meta里面创建了一个color字段,这里你就要去配置你需要的信息。

    2.在页面中获取meta标签中的信息,进行dome操作

    document.getElementById(

    "el-main").style.background = this.$route.meta[0].color;

    这里呢使用document.getElementById来对标签进行设置背景颜色,

    通过this.$route可以获取到你配置的meta信息。

    注意:

    这里如果你需要进行路由跳转的话,一定要监听一下,重新赋值,不然的话背景色不会动态改变。

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    watch: {

    $route(to, from) {

    //监听页面路由变化给页面添加背景颜色

    console.log("监听录音",this.$route);

    if (!this.$route.meta[0].color) {

    document.getElementById("el-main").style.background = "#e9eef3";//如果没有配置meta,给页面一个默认颜色

    return;

    } else{

    document.getElementById(

    "el-main").style.background = this.$route.meta[0].color;}

    }

    },

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    展开全文
  • 查阅相关资料找到 解决 在app.vue 页面 路由页面配置: { path:'/activities/create_proto', name:'create_proto', meta: { index:2, title:'活动创建', keepAlive:false, //此组件不需要被缓存 rank:1, }, ...

    页面分为: A 主页  B列表页  C 详情页

    A  beforeRouteLeave 时设置 to.meta.keepAlive = false (A 进入 B页面时), 不缓存 B列表页

    B beforeRouteLeave 时 (B -> C)列表页进详情页时 from.meta.keepAlive =true 缓存B列表页

    C详情页 返回 B列表页 ,此时B列表页缓存不生效,也就是第一次不生效

    总结问题原因:

    当进入B列表页后,keepAlive 为 true 时,缓存生效

    当离开B列表页时 设置 keepAlive 为 true  时 ,缓存不生效

    这就是很头疼的问题,查阅相关资料找到

    解决

    在app.vue 页面

    路由页面配置:

    8f900a89c6347c561fdf2122f13be562.png

    961ddebeb323a10fe0623af514929fc1.png

    {

    path:'/activities/create_proto',

    name:'create_proto',

    meta: {

    index:2,

    title:'活动创建',

    keepAlive:false, //此组件不需要被缓存

    rank:1,

    },

    component: ()=>import (/*webpackChunkName: "create_proto"*/'@/pages/activities/create_proto')

    },

    {

    path:'/activities/create/:id',

    name:'create',

    meta: {

    index:2,

    title:'活动创建',

    keepAlive:true, //此组件不需要被缓存

    isBack:false, //用于判断上一个页面是哪个

    rank:1.5,

    },

    component: ()=>import (/*webpackChunkName: "create"*/'@/pages/activities/create')

    },

    {

    path:'/activities/createMask',

    name:'createMask',

    meta: {

    index:2,

    title:'组',

    keepAlive:false, //此组件不需要被缓存

    isBack:false, //用于判断上一个页面是哪个

    rank:1.5,

    },

    component: ()=>import (/*webpackChunkName: "createMask"*/'@/pages/activities/createMask')

    },

    View Code

    让B页面始终是缓存,

    然后在B页面 就是 create页面 里:

    beforeRouteEnter(to,from,next){//来自editNotic的不缓存

    if(from.name === 'createMask' && to.name === 'create'){

    to.meta.isBack= true;

    }

    next();

    },

    activated() {//console.log(this.$route.meta)

    if(!this.$route.meta.isBack || this.isFirstEnter){//如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据

    this.getApi();

    }//恢复成默认的false,避免isBack一直是true,导致下次无法获取数据

    this.$route.meta.isBack=false;//this.isBack = false;

    this.isFirstEnter = false;

    },

    beforeCreate() {this.$loading.open();

    },

    mounted(){this.isFirstEnter = true;this.getApi();

    },

    解释一波

    缓存的页面 created 会执行只有一次,activated每次都会执行 ,

    created 里面做 第一次 isFirstEnter = true(由于页面被缓存,所以一直生效),之后再activated 里面做判断

    只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据, 并且要在下面 都设为false, 以免缓存各标识不对,

    在进入 “列表页” 时,通过router钩子函数 beforeRouteEnter做判断,

    详情页过来的设 isBack 为true,即不刷新页面

    但第一次都是不生效的,查阅了github 上的大佬方法,就是强制清除B缓存,当B页面离开去到A页面,用rank 来比较

    在main.js 中 写入:

    Vue.mixin({

    beforeRouteLeave:function(to, from, next) {

    console.log(to)if (from && from.meta.rank && to.meta.rank && from.meta.rank > to.meta.rank) { //如果返回上一层,则摧毁本层缓存。

    if (this.$vnode && this.$vnode.data.keepAlive) {if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {if (this.$vnode.componentOptions) {var key = this.$vnode.key == null ?

    this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') :this.$vnode.key;var cache = this.$vnode.parent.componentInstance.cache;var keys = this.$vnode.parent.componentInstance.keys;if(cache[key]) {if(keys.length) {var index =keys.indexOf(key);if (index > -1) {

    keys.splice(index,1);

    }

    }deletecache[key];

    }

    }

    }

    }this.$destroy();

    }

    next();

    },

    })

    就是强制清除缓存,哇,这个问题搞了半天,

    然后就解决了前进刷新,后退不刷的问题,

    当然还可以结合vuex 来做到效果,但数据比较大的话还是适合 我写的这种吧,哈哈哈

    展开全文
  • 前言最近一个需求,需要在Vue 项目中加入含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案。。。。。。Vue的...
  • 说到Vue的简单、便捷、高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项...2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同;3.关闭tab中的iframe-view后,将重新打...
  • 前言最近一个需求,需要在Vue项目中加入含有iframe的页面,同时在路由切换的过程中,要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案。。。。。。Vue的keep-...
  • 背景创业项目使用的 Vue 开发前端,最近在开发的一个需求涉及到了 Iframe 的使用,为了让父子页面能够正常通信,头都搞大了。不过最终是解决了问题,写篇文章记录下,利人利己。难点之前没有在 Vue 中使用过 Iframe...
  • 下面,我们就来说说在vue的单页应用中,实现前进刷新后退不刷新的一些实现方案,其他的方案大家可以一起补充。 keep-alive方案 keep-alive是vue官方提供的一种缓存组件实例的方法,vue官网对其用法的介绍: 包裹动态...
  • 前言:提起vue的缓存,大家第一时间想到的一定是keep-alive,但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中(在内存中),并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该...
  • Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta。需求一:在一个列表页中,第一次进入的时候,请求获取数据。点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。也就是说从其他页面进...
  • $('#content iframe')....加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);var $div = $('.main-sidebar > .sidebar-menu');$div.on('click', 'li[data-hre...
  • 说到Vue的简单、便捷、高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项...2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同;3.关闭tab中的iframe-view后,将重新打...
  • 返回A页面(this.$router.go(-1)) 目的是返回的A页面不刷新,未保存的表单都在keep-alive简介keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,避免重新渲染用法很简单<keep-alive> <c...
  • vue 路由嵌入iframe 刷新保留当前页面

    千次阅读 2020-04-20 14:35:23
    最近在研发过程中,遇到了一个优化,vue项目嵌套在另外一个vue项目的iframe中,外层vueiframe刷新iframe中的vue项目希望可以停留在你当前操作的页面,而不是刷回到一开始的iframe里src路径 当开始听到这个优化...
  • 最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息。初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳。这样能确保每次在加载页面时,让...
  • Vue如何在iframe刷新\关闭整个页面

    千次阅读 2020-08-29 15:40:21
    if(res.success){ parent.location.reload(); //刷新整个当前页 } function loadUrl(url) { if (window != top){ top.location.href = url; return; } window.location.href = url; }
  • vue-route-transitionvue router 切换动画特性模拟前进后退动画基于css3流畅动画基于sessionStorage,页面刷新不影响路由记录路由懒加载,返回可记录滚动条位置前进后退的判断与路由路径规则无关支持任意基于Vue的UI...
  • 主要获取iframe里面的文档对象,就可以任意操作iframe的内容 //contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。 //querySelector 选择器 当然也可用...
  • 前言最近一个需求,需要在Vue 项目中加入含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案。。。。。。Vue的...
  • 前言最近一个需求,需要在Vue 项目中加入含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案。。。。。。Vue的...
  • vue 中 elementui tabs 下的iframe 刷新

    千次阅读 2018-12-18 15:56:38
    1,tabs 渲染前给每个iframe绑定ref...2、通过当前选中标签的值获取iframe ,this.$refs[value]获取dom 这是一个数组 ,执行下面代码实现当前选中标签下的iframe刷新 this.$refs[value][0].contentWindow.location....
  • 最近一个需求,需要在 Vue 项目中加入 含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案。。。。。。 Vue的...
  • 说到Vue的简单、便捷、高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件;...2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同; 3.关闭t...

空空如也

空空如也

1 2 3 4 5
收藏数 94
精华内容 37
关键字:

iframevue刷新

vue 订阅