Vue实现当前页面刷新的4种方法举例
前言
这两周在写一个后台管理，每次调用接口实现增删改查的过程中，都需要刷新当前页面或者刷新数据。如果手动点击浏览器的小圈圈不仅麻烦、用户体验感极差，而且不会真的有人让用户手动刷新叭。。。这个问题可以称得上是前端的bug了。那么，顺着这个问题，一通搜寻下来，整理了几个刷新当前页面的方法，如下：
方法一：location.reload
学习JS的过程中，大家应该都了解过Browser 对象，其中Location 对象是 window 对象的一部分。Location 对象中有一个方法，也就是reload()方法，用于刷新当前文档，类似于浏览器上的刷新页面按钮。
代码测试：
<template>
<div class="hello">
<img src="../imgs/01.jpg" alt="" />
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
location.reload();
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
效果展示：
缺点： 想必大家都能看出来了叭，一闪一闪亮晶晶~
方法二：$router.go(0)
这种方法大家应该比较熟悉了，学过vue路由跳转的都知道$router.go()的作用：
> this.$router.go(-1)：后退+刷新； > this.$router.go(0)：刷新； > this.$router.go(n) ：前进n个页面
这个方法等同于上面的location.reload，也是利用浏览器的刷新功能，疯狂按F5刷新。。。
代码测试：
<template>
<div class="hello">
<img src="../imgs/02.jpg" alt="" />
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
this.$router.go(0);
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
效果展示：
缺点： 肉眼可见！会出现一瞬间的空白页面，用户体验不好
方法三：provide、inject和$nextTick
首先，我们来认识一下这组选项：
provide 选项应该是：一个对象或返回一个对象的函数。
inject 选项应该是：一个字符串数组，或 一个对象，对象的 [key] 是本地的绑定名。
在学习vue父子组件通信的时候，大家应该都知道这是用来干嘛的了：父组件通过provide向子组件传递数据，子组件通过inject获取数据。
那么$nextTick又是干哈的呢？
$nextTick 又说是Vue的另一个生命周期函数：当你修改完数据（数据更新了）之后，Vue帮你操作完DOM之后，把真实的DOM放入页面了（Dom更新渲染），Vue再帮我们调用这个函数（可以监听DOM元素被修改后，在该函数中写你要执行的逻辑）。
接下来，我们来组合一下思路：
我们在父组件中通过给<router-view></router-view>添加v-if来控制子组件销毁和重建的方式，从而控制页面的再次加载。然后在需要当前页面刷新的页面中注入 reload 依赖，直接通过this.reload来调用刷新。
代码测试：
App组件：
<template>
<div id="app">
<HelloWorld v-if="isReload" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
data() {
return {
isReload: true,
};
},
components: {
HelloWorld,
},
provide() {
return {
msg: "未刷新",
reload: this.reload,
};
},
methods: {
async reload() {
this.isReload = false;
await this.$nextTick();
this.isReload = true;
},
},
};
</script>
子组件：
<template>
<div class="hello">
<img src="../imgs/03.jpg" alt="" />
<p>{{ msg }}</p>
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
inject: ["reload", "msg"],
name: "HelloWorld",
methods: {
refresh() {
this.msg = "我刷新啦！";
this.reload;
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>效果展示：
缺点： 可以看到页面不会刷白，但是这种方法也有很多弊端。我们都知道Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。这样容易造成事件循环；并且使用provide和inject也涉及到组件的多层级通信，有些繁琐。
方法四：创建空白页
这个方法…我此前从没用过，就是利用$router.replace路由跳转到一个空白页面，然后在空白页面中立即执行$router.replace切换到原来的页面。$router.replace不会向 history 添加新纪录，当路由跳转得比较快的时候，不会出现一瞬间的空白页。
代码测试：
空白页：
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: "HelloTest",
created() {
this.$router.replace(this.$route.query.redirect);
},
};
</script>
<style scoped>
</style>
需要刷新的页面：
<template>
<div class="hello">
<img src="../imgs/04.jpg" alt="" />
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
this.$router.replace(`/blank?redirect=${this.$route.fullPath}`);
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>路由：
const router = new VueRouter({
mode: 'history',
routes: [{
path: "/",
component: () => import('../components/HelloWorld.vue'),
meta: {
keepAlive: true,
}
},
{
path: "/blank",
component: () => import('../components/HelloTest.vue'),
meta: {
keepAlive: true,
}
}]
})
效果展示：
缺点： 大家应该可以看到地址栏的变化。。
总结
以上就是比较常见的当前页面刷新的方法，各有优缺点，根据应用场景使用。
到此这篇关于Vue实现当前页面刷新的4种方法的文章就介绍到这了,更多相关Vue当前页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇Vue-cli项目获取本地json文件数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 组件基础知识的相关资料，帮助大家更好的理解和使用vue的组件，感兴趣的朋友可以了解下2021-11-11
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue flex 布局实现div均分自动换行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要给大家介绍了关于vue项目实现中英文切换的详细步骤,项目中经常有中英文切换的功能,接下来就简单实现以下这个功能,文中通过代码介绍的非常详细,需要的朋友可以参考2023-11-11
watch(监视属性)和computed(计算属性)的区别及实现案例
watch和computed是vue实例对象中的两个重要属性，watch是监视属性，用来监视vue实例对象上属性和方法的变化，computed被称为计算属性，可以将data对象中的属性进行计算得到新的属性，这篇文章主要介绍了watch(监视属性)和computed(计算属性)的区别,需要的朋友可以参考下2023-05-05
Vue3使用defineAsyncComponent实现异步组件加载的代码示例
在 Vue 3 中,异步组件加载是一种优化应用性能的重要手段,通过异步加载组件,可以减少初始加载时的资源体积,从而提升应用的加载速度和用户体验,本文将详细介绍如何使用 defineAsyncComponent 实现异步组件加载,并提供相关的代码示例,需要的朋友可以参考下2025-03-03
本篇文章主要介绍了vue.js全局API之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
下面小编就为大家分享一篇vue 引入公共css文件的简单方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了详解Vue template 如何支持多个根结点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论