这里说的是一种刷新页面的方法。
神马情况下你可能会需要?
页面内容多,结构复杂,做了某个操作后,需要更新页面很多数据或者比较复杂的数据,例如页面树状结构。这时候直接调接口刷新数据,可能达不到效果,但是如果你手动刷新下浏览器,相当于页面重新渲染一遍,就可以了。
当然,我们得尽可能减少要求用户手动刷新页面的操作
这里的做法其实很简单,就是建一个空的路由页面,页面在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
}
}
})