vue 页面刷新(重置、更新页面所有数据)
这里说的是一种刷新页面的方法。神马情况下你可能会需要?页面内容多,结构复杂,做了某个操作后,需要更新页面很多数据或者比较复杂的数据,例如页面树状结构。这时候直接调接口刷新数据,可能达不到效果,但是如果你手动刷新下浏览器,相当于页面重新渲染一遍,就可以了。当然,我们得尽可能减少要求用户手动刷新页面的操作这里的做法其实很简单,就是建一个空的路由页面,页面在mounted里面接收到传递来的路由参数后,马
·
这里说的是一种刷新页面的方法。
神马情况下你可能会需要?
页面内容多,结构复杂,做了某个操作后,需要更新页面很多数据或者比较复杂的数据,例如页面树状结构。这时候直接调接口刷新数据,可能达不到效果,但是如果你手动刷新下浏览器,相当于页面重新渲染一遍,就可以了。
当然,我们得尽可能减少要求用户手动刷新页面的操作
这里的做法其实很简单,就是建一个空的路由页面,页面在mounted里面接收到传递来的路由参数后,马上返回原页面,这样就实现了刷新效果
当然,如果页面使用了keep-alive,估计效果会不太理想
这里建一个路由页面refresh-page
<!--RefreshPage-->
<template>
<div></div>
</template>
<script>
export default {
name: 'RefreshPage',
data () {
return {}
},
computed: {},
mounted () {
let paramsData={...(this.$route.params)}
let {fromName,fromPath,query}=this.$route.query
fromName=fromName || paramsData.fromName
console.log(fromName)
if(fromName && !paramsData.isChildApp){
this.$router.replace({
name:fromName,
params:paramsData,
query
})
return
}
fromPath=fromPath || paramsData.fromPath
console.log(fromPath)
if(fromPath){
paramsData.isChildApp ? window.history.replaceState(null,fromPath,fromPath): this.$router.replace(fromPath)
}
},
methods: {
},
}
</script>
其中,isChildApp表示是子应用跳过来的,当然如果没有,不用理会。
然后fromName和fromPath,就是来源页面的路由名和路径,其中一个即可
支持params参数和query参数传递
另外,如果来源页面路径上携带有参数,显然返回去的时候也要保持参数存在,这时候就是query和paramsData两个参数了,跳转的时候吧路径上想要的参数带进来,然后再原封不动返回去。OK
使用示例:
建议跳转时用replace,这里不需要保存路由堆栈数据
this.$router.replace({
name:'RefreshPage',
query:{
fromName:'TestPage',
query:{
...this.$route.query
}
}
})
更多推荐
已为社区贡献17条内容
所有评论(0)