vue keepalived 怎么刷新

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue keepalived 怎么刷新相关的知识,希望对你有一定的参考价值。

参考技术A 需要刷新的页面在mounted里面请求数据就行了,返回的时候回再次请求数据 参考技术B 请求数据写在beforeRouteEnter

vue怎么在刷新前调用一个方法

1、最直接整个页面重新刷新

location. reload()
this.$router.go(0)
这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。

2、新建一个空白页面

新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来。
provide / inject 组合

这是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了

isRouterAlive //true or false 来控制
参考技术A 1.修改 App.vue,代码如下:
<template> <div id="app"> <router-view v-if="isRouterAlive" /> </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>
重点如下图所示:

2.到需要刷新的页面使用 inject 进行导入并引用 reload:

3.在需要进行调用的方法中调用 this.reload() 即可

以上是关于vue keepalived 怎么刷新的主要内容,如果未能解决你的问题,请参考以下文章

使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue

vue使用keep-alive实现页面前进刷新,后退缓存

vue-router 之 keep-alive

keepalive默认配置文件在 /etc/keepalived/keepalived.conf

解决Lvs+keepalived出现双VIP,即脑裂现象

keepalived入门之keepalive+nginx实例部署