vue刷新当前页面(App.vue)
vue刷新当前页面有挺多种方法,比如
window.location.reload()
或者
this.$router.go(0)
但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法
在app.vue的<router-view></router-view>加上v-if属性
<router-view v-if="isRouterAlive"></router-view>
在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为true
data () {
return {
isRouterAlive: true
}
}
methods里面加入一个刷新的方法
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
最后,需要把这个函数 provide 出去
provide () {
return {
reload: this.reload
}
}
这样,app.vue上就设置完了
那么当我们需要刷新的时候,在需要的页面上加上这个函数就可以了
首先注入这个函数
inject: ['reload']
然后在需要用到这个函数的地方去引用就行了
refresh () {
this.reload()
}
这样子就可以刷新页面了,而且不会出现白屏的情况,比前面两种方法好用,推荐大家使用。
附带上完整代码
<template>
<div id="app">
<div class="wrap">
<router-view v-if="isRouterAlive"></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
<style>
#app{
position: relative;
}
@media only screen and (min-width: 1200px) {
.wrap{
width: 65%;
margin: 0 auto;
}
}
</style>
<template>
<button @click="refresh"></button>
</template>
<script>
export default{
name: 'refresh',
inject: ['reload'],
methods: {
refresh () {
this.reload()
}
}
}
</script>
作者:翔阿翔阿翔
链接:https://www.jianshu.com/p/b6d7db35b6e4
标签:
Vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!