这里说的是一种刷新页面的方法。

神马情况下你可能会需要?

页面内容多,结构复杂,做了某个操作后,需要更新页面很多数据或者比较复杂的数据,例如页面树状结构。这时候直接调接口刷新数据,可能达不到效果,但是如果你手动刷新下浏览器,相当于页面重新渲染一遍,就可以了。

当然,我们得尽可能减少要求用户手动刷新页面的操作

这里的做法其实很简单,就是建一个空的路由页面,页面在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
		}
	}
})
Logo

前往低代码交流专区

更多推荐