VUE实现页面局部刷新

vue实现页面刷新

在我的页面里有使用过三种页面刷新的方法，接下来挨个介绍下：
一、当前窗口刷新

window.location.reload()  //页面刷新

二、路由切换方式

this.$router.push("需要刷新的页面地址");  //页面刷新

以上两种方式都可以有页面刷新的效果，但是缺点就是会出现空白页，第三种方式就可以解决这一缺点，我们一起来看看。。。

三、provide / inject 组合方式
首先在你的App.vue页面添加v-if=“isRouterAlive”，如以下代码：

HTMl：

<template><div><router-view v-if="isRouterAlive"></router-view></div>
</template>

JS：

export default {name: "app",data() {return {isRouterAlive: true,};},provide() {//提供return {reload: this.reload,};},methods: {reload() {this.isRouterAlive = false;this.$nextTick(function () {this.isRouterAlive = true;});},},
};

最后在你需要加载的页面注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行，如以下代码：

JS：

  inject: ["reload"], //注入   和methods同级methods: {onSubmit() {this.reload(); //局部刷新}}

总结：以上三种办法都可以用来页面刷新，希望对大家有所帮助，有任何疑问可以留言，我会随时回复大家的问题的！！！

VUE实现页面局部刷新相关推荐

Vue3中如何进行页面局部刷新，组件刷新
前言今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态但是数据已经传送给后端,后端也完成了响应的处理这个时候我想到了局部刷新,我想vue3是vue ...
ajax 局部页面替换innerhtml,ajax jquery 页面局部刷新的不同实现代码
以下示例是学习使用XMLHttpRequest时,实现的页面局部刷新的代码,分享下. 复制代码代码示例: 页面局部刷新功能_www.jbxue.com window.onload = functio ...
asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
页面局部刷新三种方法
页面局部刷新 1.使用ajax实现小部分的内容局部刷新 $.ajax({ url:"http://localhost:8080/intoHomepage.do", type:&qu ...
java局部刷新_HTML页面局部刷新的实现代码
这篇文章主要介绍了HTML页面局部刷新的实现代码的相关资料,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 事件响应刷新:有请求才会刷新 1.通过 ...
ajax局部刷新html页面,Ajax实现页面局部刷新
最近开发网站,需要实现Ajax实现页面局部刷新,花了2天时间搞定,做个记录开发环境 WAMP集成开发环境,也就是本地服务器参考资料: 油管教学视频简单的例子,可能利用的是bootstap提供的一 ...
jQuery子页面刷新父页面--局部刷新+整体刷新 [转]
用的是_window.Open()方式打开的窗口(风声js的window插件打开子窗口) ,类似于window.open() //用于刷新父窗口整个页面 window.parent.location. ...
spring mvc + ajax上传文件，页面局部刷新
1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...
html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...

VUE实现页面局部刷新

vue实现页面刷新

VUE实现页面局部刷新相关推荐

最新文章

热门文章