在vue中利用路由重定向实现页面刷新/重置

做法其实很简单，就是建一个空的路由页面，页面在mounted里面接收到传递来的路由参数后，马上返回原页面，这样就实现了刷新效果

代码展示：

<!--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=fromName || paramsData.fromName
      console.log(fromName)
      if(fromName && !paramsData.isChildApp){
        //使用$router.replace()方法进行重定向
        this.$router.replace({
          name:fromName,
          params:paramsData,
          query
        })
        return
      }

      //如果没有fromName参数或者为子应用,则判断是否有fromName参数
      fromPath=fromPath || paramsData.fromPath
      console.log(fromPath)
      if(fromPath){
        //根据isChildApp参数选择使用哪种定向方法
        paramsData.isChildApp ? window.history.replaceState(null,fromPath,fromPath): this.$router.replace(fromPath)
      }
    },
    methods: {

    },

  }
</script>

这个组件的实现主要是在 mounted() 钩子函数中完成的，它会在组件挂载后自动调用。
首先，我们使用 $route 对象获取当前路由的参数。$route.params包含路径参数，$route.query包含查询参数。这两个对象都是只读的，不能直接修改。

接着，我们判断是否有 fromName 参数，并且不为子应用。如果满足条件，则使用 $router.replace() 方法进行重定向。$router.replace() 可以接受一个包含路由名称、路径参数和查询参数的对象作为参数，它会将当前路由替换成指定的路由，而不会添加新的历史记录。

如果没有 fromName参数或者为子应用，则判断是否有 fromPath参数。如果满足条件，则根据 isChildApp参数选择使用哪种重定向方法。如果 isChildApp为真，则使用 window.history.replaceState() 方法将浏览器的 URL 修改为 fromPath，同时不会添加新的历史记录。否则，使用 $router.replace() 方法将当前路由替换成 fromPath指定的路由，同样不会添加新的历史记录。

最后，该组件还定义了一个空的 methods对象，表示它没有任何方法。

总之，这个组件的作用是在页面挂载时进行路由重定向，以实现特定的跳转逻辑

其中，isChildApp表示是子应用跳过来的，当然如果没有，不用理会。
然后fromName和fromPath，就是来源页面的路由名和路径，其中一个即可 支持params参数和query参数传递
另外，如果来源页面路径上携带有参数，显然返回去的时候也要保持参数存在，这时候就是query和paramsData两个参数了，跳转的时候吧路径上想要的参数带进来，然后再原封不动返回去。

使用示例：

建议跳转时用replace，这里不需要保存路由堆栈数据

this.$router.replace({
	name:'RefreshPage',//目标路由的名称
	query:{路由参数查询
		fromName:'TestPage',//自定义的查询参数
		query:{
			...this.$route.query//将当前路由对象的所有查询参数传递给目标陆游1
		}
	}
})

其中，name属性表示目标路由的名称，即要跳转到的页面组件；query属性表示要传递给目标路由的查询参数。

在这个例子中，目标路由的名称为 RefreshPage，需要传递一个名为 fromName的查询参数，并将当前路由对象的所有查询参数也一并传递给目标路由。因此，可以看出这段代码的作用是在页面加载时进行路由重定向，跳转到名为 RefreshPage的页面组件，并且携带特定的查询参数。

需要注意的是，这里使用了 ES6 的扩展运算符 ... 来将当前路由对象的所有查询参数展开并传递给目标路由。这样做的目的是为了避免手动逐个复制当前路由对象的查询参数，从而提高代码的可读性和可维护性