Vue无感刷新当前页面
Vue无感刷新当前页面
Dawnzhang
发布于 2023-10-16 14:25:25
发布于 2023-10-16 14:25:25
使用 Vue 选项/组合 Api provide / inject Api 地址，此方法可以实现无感刷新并且不会出现闪烁的空白。
- 首先在根组件 App.vue 定义这个方法
html
复制代码
<template>
<div id="app">
<router-view v-if="routerAlive"></router-view>
</div>
</template>javascript
复制代码
export default {
//暴露 reload 这个方法，方便组件调用
provide() {
return {
reload: this.reload,
}
},
data() {
return { routerAlive: true }
},
methods: {
//重新加载的方法
reload() {
this.routerAlive = false
this.$nextTick(function () {
this.routerAlive = true
})
},
},
}- 这样就可以在你要刷新的页面组件调用这个方法
javascript
复制代码
export default {
inject: ["reload"],
......
methods:{
handleReload(){
//在你要用到的地方调用这个重新刷新的方法
this.reload()
}
}
}- 最后如果不考虑用户体验的话，也可以用下面的方法：
javascript
复制代码
// 1.window.location.reload()应该是刷新.相当于 按页面刷新按钮
window.location.reload()本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录