vue刷新页面 刷新页面的三种方法
在项目中又刷新整个页面的需求，所以我们来谈谈刷新页面的方法，有两种常见的方法，还有一种不常见但是极力推荐的。
-
第一种
this.$router.go(0)
-
第二种
location. reload()
这两种和Ctrl+r 、F5效果一样，是重新加载整个页面，会出现一瞬间白屏的效果，用户体验不好，所以不推荐使用
-
第三种（推荐），通过provide / inject 的方式，具体方法如下
App.vue 文件
<template>
<div id="app">
// 通过控制 router-view的显示隐藏重新加载
<router-view v-if="isRouteAlive" />
</div>
</template>
<script>
export default {
name: 'app',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouteAlive: true
}
},
methods: {
reload() {
this.isRouteAlive = false
this.$nextTick(() => {
this.isRouteAlive = true
})
}
}
}
在需要刷新的页面使用方法如下
test.vue
<template>
<div>
<el-button @click="reload">刷新</el-button>
</div>
</template>
<script>
export default {
name: 'test',
inject:['reload'],
data() {
retrun {}
}
</script>
这样子就可以实现刷新了，并且不会出现白屏的效果，用户体现会好很多。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/64809.html
