vue 页面刷新（重置、更新页面所有数据）

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

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

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

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

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