小技巧-优雅实现页面刷新(vue)

前几天项目经理提了个需求要实现点击刷新按钮实现页面的小技现页新局部刷新,刷新页面使用谷歌的重新加载不是就可以了何必要去自己开发呢?结果自己尝试了一番发现只能实现全局的刷新，局部刷新还是巧优比较捉急。

尝试

push和replace这两个都方法都是雅实vue-router提供的api。

在vue项目中使用this.$router.push()方法来跳转不同路径,面刷如果跳转相同的路径的话会发现页面并没有刷新，而是小技现页新在histry栈中添加了一个新的源码下载记录，所以，巧优当用户点击浏览器后退按钮时，雅实则回到之前的面刷 URL。

使用this.$router.replace()方法报错vue-router.esm.js?小技现页新8aaf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location这个是由于多次访问相同路由导致路由重复。

转化

将要刷新的巧优路由和刷新后的路由之间通过一个桥梁(作为过渡)来连接。

将路由的雅实信息和参数全部都传给"桥梁",当其跳转的一瞬间获取到参数和路由信息跳转到原来的路由。b2b供应网为了让用户无感知在跳转"桥梁"路由的面刷时候使用replace方法不会向history中添加新的记录,在跳回原路由的时候是history方法，如果路由相同会替换之前的小技现页新路由，而用户在点击浏览器回退按钮的巧优时候悄然不知做了什么。

this.$router.replace({     path: /redirect + fullpath }) 

配置路由信息

{     path: /redirect/:path(.*),雅实     component: () => import(@/views/redirect/index) } 

桥梁文件

<script> export default {   beforeCreate() {     const { params, query } = this.$route     const { path } = params     this.$router.replace({ path: / + path, query })   },   render(h) {     return h()   } } </script> 

 【编辑推荐】

凉凉，老板叫我开发一个简单的工作流引擎... Windows10将迎来翻天覆地变化！今年第一个更新来了 2021年将迎来六大网络安全趋势 Windows 10近年最大改进！Windows10 21H2新特性抢先看 小爱同学竟然推出了PC版？带你体验电脑版小爱网站模板

本文地址：http://www.bhae.cn/news/217e20399579.html