精华内容
下载资源
问答
  • vue不用window的方式刷新当前页面

    千次阅读 2019-05-20 21:38:50
    vue项目中我们很多时候需要刷新页面,比如本地用户信息更新后,或者需要重新加载当前页面的数据时,使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新,和h5快捷键一样,会有短暂空白...

    vue项目中我们很多时候需要刷新页面,比如本地用户信息更新后,或者需要重新加载当前页面的数据时,使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新,和h5快捷键一样,会有短暂空白出现,体验很不好,这里说两种在vue项目里使用的无感知刷新页面方法:

    一、provide/inject方法

    父组件中provide提供的属性可以在任何子组件里通过inject接收到,那么我们在App页面动态改变总路由的显示和隐藏来达到刷新的效果。在App页面定义一个reload方法:

    App.vue

            reload() {
                this.defaultActive = false;
                this.$nextTick(() => {
                    this.defaultActive = true;
                });
            }

    defaulActive用于控制页面的显影:

    <template>
        <div id="app">
            <router-view v-if="defaultActive" />
        </div>
    </template>

    provide提供子组件访问的入口:

        provide() {
            return {
                reload: this.reload
            };
        }

    在需要刷新的页面通过inject接收到该全局方法:

    page.vue

    inject: ["reload"]

    需要刷新的时候调用该方法:
     

            refresh() {
                this.reload();
            }

    全部代码:

    App.vue:

    <template>
        <div id="app">
            <router-view v-if="defaultActive" />
        </div>
    </template>
    <script>
    export default {
        provide() {
            return {
                reload: this.reload
            };
        },
        data() {
            return {
                defaultActive: true
            };
        },
        methods: {
            reload() {
                this.defaultActive = false;
                this.$nextTick(() => {
                    this.defaultActive = true;
                });
            }
        }
    };
    </script>

    page.vue

    <script>
    export default {
        inject: ["reload"],
        data() {
            return {};
        },
        methods: {
            refresh() {
                this.reload();
            }
        }
    };
    </script>

    二、中间页面重定向

    可以新建一个页面reload.vue,当page.vue需要刷新的时候,将路由指向reload页面,再跳转回page页面,由于页面的key发生了变化,所以页面会被刷新

    page.vue:

            refresh() {
                const { fullPath } = this.$route;
                this.$router.replace({
                    path: "/redirect",
                    query: { path: fullPath }
                });
            }

    reload.vue:

    <script>
        export default {
            name: "reload",
            props: {},
            beforeCreate() {
                const { query } = this.$route;
                const { path } = query;
                this.$router.replace({
                    path: path
                });
            },
            render(h) {
                return h();
            }
        };
    </script>

     

    展开全文
  • jquery刷新当前页面、刷新父级页面 window.location.reload(); // 刷新当前页面 parent.location.reload(); // 刷新父级页面 opener.location.reload(); // 刷新父窗口页面(用于单开窗口) top.location.reload(); ...
    jquery刷新当前页面、刷新父级页面
    window.location.reload(); // 刷新当前页面
    parent.location.reload(); // 刷新父级页面
    opener.location.reload(); // 刷新父窗口页面(用于单开窗口)
    top.location.reload(); // 刷新最顶端页面(用于多开窗口)
    
    
    补充常用的知识
    window.open(); // 打开窗口 
    window.close(); // 关闭一个窗口(关闭窗口本身用self)
    window.alert('弹窗信息') // 弹出提示信息(常用,不过用了ui库之后很少用了); 
    window.confirm('确认框信息'); // 弹出确认框 
    window.prompt(); // 弹出输入提示框:   
    window.location.href= 'http://xx.com'; // 跳转某给链接  后面等号不接url可打印当前url
    console.log(window.location.href) // 打印当前url
    window.open("http://xx.com", "_blank"); // 从新页面打开url
    
    展开全文
  • //父页面函数 function showPort(){ var k = window.showModalDialog("url,"_blank","dialogWidth=500px;dialogHeight=300px;center=yes;location=no"); if(k == 1){//判断是否刷新 window.location.reload(); ...

    //父页面函数

    function showPort(){
    var k = window.showModalDialog("url,"_blank","dialogWidth=500px;dialogHeight=300px;center=yes;location=no");
    if(k == 1){//判断是否刷新
    window.location.reload();
    }

    }

    //子页面

    var k = window.dialogArguents;//获得父窗口传递过来的值
    //关闭当前窗口
    function winClose(isRefrash){
    window.returnValue = isRefrash;
    window.close();
    }

    //子页面调用

    <input  type="button" οnsubmit="winClose(1)" value="刷新父页面"/>

    <input  type="button" οnsubmit="winClose(0)" value="不刷新父页面"/>

    展开全文
  • window.location.reload()刷新当前页面.
    window.location.reload()刷新当前页面.
    展开全文
  • 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面.(我用的这个一个,非常好) parent.location.reload(); //刷新父亲对象(用于框架) ...
  • 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面. parent.location.reload(); //刷新父亲对象(用于框架) opener.location.reload(); //刷新...
  • 如何使用jQuery刷新当前页面、刷新父级页面? 1、全页面刷新方法 window.location.reload(); //刷新当前页面. parent.location.reload(); //刷新父亲对象(用于框架) opener.location.reload(); //刷新父窗口...
  • vue 刷新当前页面或者跳转页面时候刷新

    万次阅读 多人点赞 2018-08-03 14:59:13
    1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的 2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好 解决办法 方式一 先新建...
  • Jquery 刷新当前页面

    2019-10-23 11:08:14
    window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于多天窗口) ...
  • 不重新刷新当前页面

    2020-07-07 10:32:58
    在工作中遇到了不重新刷新当前页面的问题。 开始用的是: window.location.href=window.location.href; 来刷新当前页面,可是大佬告诉我可能会有不刷新当前页面而是直接使用缓存后的页面的问题,所以要不重复刷新。 ...
  • js刷新当前页面

    2019-09-11 08:43:44
    //刷新当前页面 window.location="../index.html"; //页面跳转 window.history.go(-1); //返回上一页 window.history.go(返回第几页,也可以使用访问过的URL); var arr = location.href.split('/'); //js获取...
  • js 刷新当前页面

    2018-07-12 10:57:00
    本文为大家介绍三种 js 刷新当前页面的方法:reload() 方法;replace() 方法;页面自动刷新;方法1:reload() 方法reload()方法用于刷新当前文档。reload() 方法类似于你浏览器上的刷新页面按钮。window.location....
  • Vue 刷新当前页面

    2019-03-29 09:53:48
    在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个...
  • window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于多开窗口) 下...
  • vue刷新当前页面

    2019-12-17 10:49:59
    vue刷新当前页面有挺多种方法,比如 window.location.reload() 或 this.$router.go(0) 但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法: 在app.vue的加上v-if...
  • VUE 刷新当前页面

    2019-10-15 15:22:00
    vue刷新当前页面有挺多种方法,比如 window.location.reload()或者 this.$router.go(0) 但是这两种方法是会出现一瞬间的白屏,体验不好,不推荐 友好的刷新页面的方法: 步骤: 一、在app.vue 设置 1、在...
  • 强制刷新当前页面

    千次阅读 2019-05-23 21:38:15
    window.location.reload();// 强制刷新页面
  • 刷新当前页面

    2019-09-21 03:46:20
    <script> window.onload=function(){ document.getElementById("updatePage").onclick=function(){ /*windo为当前的窗口对象*/ /*方法1:直接调用reload*/ ...
  • vue 刷新 当前页面

    2019-11-27 15:20:11
    刷新当前页有可以采用一下3种方式 1、window.location.reload() 是原生JS提供的方法,整个浏览器进行了重新加载,闪烁,体验不好 2、this.$router.go(0) 是vue路由里面的一种方法,整个浏览器进行了重新加载,闪烁,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,300
精华内容 520
关键字:

window刷新当前页面