一、问题

有时候需要手动刷新整个页面。比如一个页面右侧有一个患者切换的菜单，切换完患者后，要重新调用接口，才能让当前的页面中的数据与患者对应。

对于这种情况有两种解决方法：

1.方法一：切换完患者后，直接重新调用接口；

缺点：1)只能刷新页面中调用接口的数据，如果接口过多，会出现代码冗余问题

2)没有调用接口的部分需要单独处理，例如使用时间选择组件时，如果需要默认当前时间，还需要手动更改 value;子组件内部有接口时，还需要添加v-if处理或者使用ref引用子组件调用子组件内部的接口。

2.方法二：手动刷新，刷新整个页面。-----如何实现？

二、手动刷新当前页面

1.方法一：v-if router-view

<template><router-view v-if="isShow" ></router-view>
</template>
<script>
import { defineComponent, provide, ref} from 'vue';export default defineComponent({provide(){return{reload:this.reload};},setup() {//是否显示const isShow=ref(true);return{isShow,}},methods:{reload(){//  1.方法一：v-if 刷新 router-viewthis.isShow=false;this.$nextTick(()=>{this.isShow=true;})}}
});
</script>
<style lang="scss" scoped>
</style>

2.方法二：更改 router-view的 key值

<template><router-view :key="componentKey"></router-view>
</template>
<script>
import { defineComponent, provide, ref} from 'vue';export default defineComponent({provide(){return{reload:this.reload};},setup() {//是否显示const componentKey=ref('')return{componentKey}},methods:{reload(){// 2.方法二：更改 router-view的key值this.componentKey=new　Date().getTime()}}
});
</script>
<style lang="scss" scoped>
</style>

三、总结

1.刷新整个页面的方法：

在router-view中：方法reload

1）v-if

2) 组件添加一个key值，更改key的值

在需要刷新的页面接收inject("reload",reload")并在需要刷新页面时调用 reload方法。

希望对你有帮助！

如有错误，欢迎指正，非常感谢

vue 刷新当前页面的方式相关推荐

vue刷新当前页面的方法
第一个想到的方法是this.$router.push() , 但是会报错 , 不让自己页面跳转自己页面 , 就算解决了这个问题跳转了之后 , dom也不会渲染 , 页面的数据显示不出来 , 所以查询了 ...
JS中刷新当前页面的方式
1.window.location.href="url": 当前页面打开URL页面,改变url地址,如果URL为空则重新打开当前页面. (1)与self.location.href ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
Vue项目实战02 : vue项目刷新当前页面的三种方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router ...
vue的html自动刷新,vue项目刷新当前页面的方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
js 刷新当前页面的方法 reload() , replace()的简单使用
本文为大家介绍三种 js 刷新当前页面的方法,我是在vue实例下写的: 添加定时器是为了直观看到刷新效果(每次刷新都会重置为0): reload() 方法; replace() 方法; 页面自动刷新; ...
html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...
前端刷新当前页面的方法总结
最近在做编辑的时候遇到这样的问题:修改完数据之后需要刷新页面获取最新数据前端刷新当前页面的方法总结: 1.this.$router.go(0) 2.location.reload() 以上两种刷新页 ...

vue 刷新当前页面的方式