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)


相关推荐

  • docker使用教程视频_docker到底怎么用

    docker使用教程视频_docker到底怎么用前言docker主要用于运维,当然了,开发也可以用,可以在启动应用项目的时候使用docker方式,docker是虚拟化技术,每一个docker容器都是一个linux虚拟机,而且还可以根据不同的应用定制,最小的可以直接依赖linux内核,仅仅几M就可以运行。下面,正式开始。 注意:如果是使用docker-compose方式,只看到第三的第6即可。 一、安装dockercent…

    2022年10月15日
  • PhpStorm 2021.5.2 最新激活码(最新序列号破解)

    PhpStorm 2021.5.2 最新激活码(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • nat模式「建议收藏」

    nat模式「建议收藏」原文链接:https://www.linuxidc.com/Linux/2016-09/135521p2.htm(复制过来只是为了学习方便,如有不妥会立即删除)二、NAT(地址转换模式)刚刚我们说到,如果你的网络ip资源紧缺,但是你又希望你的虚拟机能够联网,这时候NAT模式是最好的选择。NAT模式借助虚拟NAT设备和虚拟DHCP服务器,使得虚拟机可以联网。其网络结构如下图所示:在NAT模式中,主机…

  • 硬盘的主分区和逻辑分区有什么区别_移动硬盘要不要分区

    硬盘的主分区和逻辑分区有什么区别_移动硬盘要不要分区硬盘分区有三种,主磁盘分区、扩展磁盘分区、逻辑分区。一个硬盘可以有一个主分区,一个扩展分区,也可以只有一个主分区没有扩展分区。逻辑分区可以若干。主分区是硬盘的启动分区,他是独立的,也是硬盘的第一个分区,正常分的话就是C驱。分出主分区后,其余的部分可以分成扩展分区,一般是剩下的部分全部分成扩展分区,也可以不全分,那剩的部分就浪费了。但扩展分区是不能直接用的,他是以逻辑分区的方式来使用的,所以说扩展分…

  • 微信公众号是html页面吗,微信公众号网页开发

    微信公众号是html页面吗,微信公众号网页开发基本配置1.设置—公众号设置—功能设置—配置JS接口安全域名安全域名配置规则如下2.开发—基本配置开发者密码第一次使用需要重新设置记录开发者ID(AppID)开发者密码(AppSecret)后面会用到3.IP白名单配置推荐填写当前本地开发IP地址和服务器IP地址本地开发地址获取方式服务器IP地址(根据自己的服务器Ip地址自行填写)多个IP地址填写用回车隔开4重要的一步在:微信公众号-开发-接…

  • 复试题–smith数

    复试题–smith数

发表回复

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

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