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

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

创新互联建站是专业的梧州网站建设公司，梧州接单;提供网站设计制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行梧州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

尝试

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这个是由于多次访问相同路由导致路由重复。

转化

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

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

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

配置路由信息

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

桥梁文件

【编辑推荐】

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

分享标题：小技巧-优雅实现页面刷新(vue)
本文URL：http://www.shufengxianlan.com/qtweb/news37/299837.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容