当前位置: 首页 > 科技观察

Tips-优雅刷新页面(vue)

时间:2023-03-12 06:24:01 科技观察

前几天,项目经理提出了一个需求,通过点击刷新按钮实现页面的局部刷新。刷新页面并使用谷歌的重新加载。为什么需要自己开发??结果自己试了一下,发现只能实现全局刷新,局部刷新还是比较急。试试push和replace,这两个都是vue-router提供的API。在vue项目中使用this.$router.push()方法跳转到不同的路径。如果跳转到同一个路径,会发现页面并没有刷新,而是在历史栈中添加了一条新的记录。因此,当用户点击浏览器后退按钮时,返回到之前的URL。使用this.$router.replace()方法报vue-router.esm.js?8aaf:2065Uncaught(inpromise)NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation这是由于多次访问同一条路线导致重复路由。桥(作为过渡)用于连接要刷新的路由和转换后的路由。将所有的路由信息??和参数传递给“桥”,在跳转的瞬间拿到参数和路由信息后跳转到原路由。为了让用户无意识,使用replace方法在跳转到“bridge”路由时不会在历史记录中添加新的记录。跳回到原来的路由时,就是history方法。如果路由相同,则之前的路由会被替换掉,用户在点击浏览器后退按钮时不知所措。this.$router.replace({path:'/redirect'+fullpath})配置路由信息{path:'/redirect/:path(.*)',component:()=>import('@/views/redirect/index')}桥接文件},render(h){returnh()}}【编者推荐】亮亮,老板让我开发一个简单的工作流引擎……Windows10将迎来翻天覆地的变化!今年的第一次更新就在这里。2021年将迎来六大网络安全趋势。Windows10近年最大改进!先看Windows1021H2新特性小爱同学居然推出了PC版?带你体验电脑版小爱同学