vue keepalived 怎么刷新
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue keepalived 怎么刷新相关的知识,希望对你有一定的参考价值。
参考技术A 需要刷新的页面在mounted里面请求数据就行了,返回的时候回再次请求数据 参考技术B 请求数据写在beforeRouteEntervue怎么在刷新前调用一个方法
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