Vue中刷新当前页面

简介: Vue中刷新当前页面

刷新页面

方法一

window.reload();

方法二

this.$router.go(0);

以上两种方式会出现白屏

方法三

不会有闪烁的空白出现

App.vue

<template>

<div id="app">
<!-- 增加判断,让其隐藏 -->
<router-view v-if="isRouterAlive"/>
</div>
</template>

<script>
export default {
name: 'App',

// 暴露reload,方便后面组件调用
provide(){
return {
reload: this.reload
}
},

data(){
return {
isRouterAlive: true
}
},

methods:{
// 重新加载方法
reload(){
this.isRouterAlive = false;
this.$nextTick(()=>{
this.isRouterAlive = true;
})
}
}
}
</script>

子组件调用刷新方法

<script>
export default {

// 获取APP.vue里的reload方法
inject: ["reload"],

methods: {
reloadPage() {
// 刷新页面
this.reload();
}
}
}
</script>

参考

vue项目如何刷新当前页面

            </div>
目录
相关文章
|
Kubernetes Nacos 数据中心
k8s(9)Namespace(命名空间)
Namespace(命名空间)
628 0
|
12月前
|
存储 JSON 数据库
鸿蒙元服务项目实战:备忘录内容编辑开发
富文本内容编辑我们直接使用RichEditor组件即可,最重要的就是参数,value: RichEditorOptions,通过它,我们可以用来设置样式,和获取最后的富文本内容,这一点是很重要的。
345 5
鸿蒙元服务项目实战:备忘录内容编辑开发
|
自然语言处理 语音技术
|
物联网 PyTorch 测试技术
LLM 大模型学习必知必会系列(十):基于AgentFabric实现交互式智能体应用,Agent实战
LLM 大模型学习必知必会系列(十):基于AgentFabric实现交互式智能体应用,Agent实战
LLM 大模型学习必知必会系列(十):基于AgentFabric实现交互式智能体应用,Agent实战
|
缓存 前端开发 API
toapi,一个强大的 Python Web API库!
toapi,一个强大的 Python Web API库!
357 5
|
存储 安全 Linux
深入解析Linux的`read`命令
`read`命令在Linux shell中用于从标准输入读取数据并赋值给变量。它可以用于交互式脚本,提供用户输入或读文件。关键选项包括`-p`(提示用户)、`-r`(禁用转义)、`-s`(静默模式,适合密码)、`-t`(超时)和`-n`(读取特定字符数)。示例包括基本输入、带提示的密码输入和设置超时的输入。注意安全处理密码和验证用户输入。
|
JavaScript
vue.config.ts配置环境变量
vue.config.ts配置环境变量
472 0
|
SQL 关系型数据库 MySQL
关于MYSQL flush table的作用
关于MYSQL flush table的作用水平有限,还待学习。如有错误,请指正。 先给出官方文档: ? FLUSH TABLES Closes all open tables, forces all tables in use to be closed, and flushes the query cache.
5309 0
|
搜索推荐 网络安全 Apache
如何飞速成为开源贡献者(Contributor)
如何飞速成为开源贡献者(Contributor)
530 0
|
Ubuntu
Ubuntu录屏及gif制作
Ubuntu录屏及gif制作
494 0
Ubuntu录屏及gif制作