Vue刷新页面的三种方式[通俗易懂]

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

  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();
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181013.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Activiti7的El表达式的坑 com.fasterxml.jackson.databind.node.IntNode to class java.lang.Long (incompatible

    Activiti7的El表达式的坑 com.fasterxml.jackson.databind.node.IntNode to class java.lang.Long (incompatible///网关标准金额Assigneevariables.put(Assignee_standardMoney,”1000″);<sequenceFlowid=”_12″sourceRef=”_5″targetRef=”_6″><conditionExpressionxsi:type=”tFormalExpression”><![CDATA[${amountOfMoney<‘1000’}]]></condition.

  • 给你个使用NAS私有云服务器的理由

    给你个使用NAS私有云服务器的理由  当我们的电脑硬盘或者手机内存被占满之后,可能很多人第一时间想到的就是用网盘或者U盘来进行扩充,但现如今相对于网盘和U盘更多的人愿意选择和使用外接式硬盘来进行资料备份和存储。是的,虽然外接式硬盘比网盘和U盘更安全,其实那只是你不知道有一种叫NAS存储服务器的情况才会想到外接式硬盘,NAS存储服务器在今年来不断被人们所接受!网盘充当着公有云的角色,NAS存储服务器充当着私有云的角色!  NAS…

  • idea设置全局搜索快捷键

    idea设置全局搜索快捷键idea默认的全局搜索二、修改为Alt+F

  • python激活码 3月最新注册码

    python激活码 3月最新注册码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Oracle创建本地数据库实例及配置「建议收藏」

    Oracle创建本地数据库实例及配置「建议收藏」        因为以前一直都是用的mysql的数据库,所以当新工作中用到Oracle数据库的时候,一时还有点不习惯,特别是一直连接的远程数据库,更是麻烦,所以就想在本地创建一个Oracle的数据库,然后导入数据库的备份文件方便使用。然而看似简单的东西,真正动起手来,却也还是花了好一会儿工夫也才解决。所以希望能够把安装的过程记录下来,不仅方便自己以后查阅,也能督促自己开始写博客(3年前就有这样的想…

  • python爱心代码制作_python如何编出一个爱心文字

    python爱心代码制作_python如何编出一个爱心文字[M][fts=2][ftc=F7941D]╭╮╭╮[/ft][ftc=F7941D]╭╮╭╮[/ft]\[ftc=FFF100]∨[/ft]/\[ftc=FFF100]∨[/ft]/([ftc=00BFF3]≥[/ft]﹏[ftc=00BFF3]≤[/ft])([ftc=EF6EA8]≥[/ft]﹏[ftc=EF6EA8]≤[/ft])/[ftc=…

    2022年10月18日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号