vue 页面刷新(重置、更新页面所有数据)

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

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

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

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

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

当然,如果页面使用了keep-alive,估计效果会不太理想

这里建一个路由页面refresh-page






其中,isChildApp表示是子应用跳过来的,当然如果没有,不用理会。

然后fromName和fromPath,就是来源页面的路由名和路径,其中一个即可

支持params参数和query参数传递

另外,如果来源页面路径上携带有参数,显然返回去的时候也要保持参数存在,这时候就是query和paramsData两个参数了,跳转的时候吧路径上想要的参数带进来,然后再原封不动返回去。OK

使用示例:
建议跳转时用replace,这里不需要保存路由堆栈数据

this.$router.replace({
    name:'RefreshPage',
    query:{
        fromName:'TestPage',
        query:{
            ...this.$route.query
        }
    }
})

你可能感兴趣的:(vue 页面刷新(重置、更新页面所有数据))