Vue刷新页面的三种方式

Vue刷新页面的三种方式我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。原始方法:location.reload();vue自带的路由跳转:this.$router.go(0);用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。所以,我们选择第三种方式:3.首先在App里面…

大家好,欢迎来到IT知识分享网。Vue刷新页面的三种方式"

我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。

  1. 原始方法:
location.reload();
  1. vue自带的路由跳转:
this.$router.go(0);

用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。
所以,我们选择第三种方式:
3. 首先在App里面写下如下代码:

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default { 
   
        name: 'App',
        provide () { 
       //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。 
            return { 
   
                reload: this.reload                                              
            }
        },
        data() { 
   
            return{ 
   
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: { 
   
            reload () { 
   
                this.isRouterAlive = false;            //先关闭,
                this.$nextTick(function () { 
   
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        }}
</script>

接下来,我们就可以在需要刷新页面的组件里这样写:

export default { 
   
    inject:['reload'],                                 //注入App里的reload方法
    data () { 
   
        return { 
   
    	.......
        }
    },

在需要刷新页面的代码块中使用:

this.reload();

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/10474.html

(0)
上一篇 2024-03-31 07:33
下一篇 2024-04-01 20:26

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信