【vue/cli3+】路由不变的情况下,刷新页面

本文探讨了在Vue项目中,特别是在后台管理系统中,如何解决数据更新后前台视图不实时刷新的问题。介绍了两种有效的解决方案:一是通过中转站页面实现路由的间接刷新;二是利用Vue的provide/inject特性,实现局部组件的按需刷新,提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【vue/cli3+】路由不变的情况下,刷新页面

前言

在vue写的后台管理项目中,经常会有增、删、改、查的操作,这些操作只是跟用接口跟后台交互下,既然用接口交互,那肯定就是axios的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了),所以就有了动态路由。在使用动态路由配置/detail/:id这样的情况下,由于router-view是复用的,单纯的改变id的值并不会刷新router-view所以就要想一个办法,让后台执行完操作后,给前台返一个操作结果,然后前台手动刷新页面,一开始我想到的是用window.location.reload()或者this.$router.go(0)这两个方法,但是后来发现这两个方法消耗都很大,用户体验并不太好,违背了vueRouter的初衷,所以就放弃了。看了下别人的做法,整理下面两种方法:

第一种:中转站的方式

用一个空白组件在每次操作之后进行跳转,相当于Nginx反向代理一样。意思就是让每次操作完成以后,都让路由跳转到这个中转站页面,然后这个页面获取到进来路由的路径再返回去就可以了。这种方式如果说你的路由是显性的,就是直接显示在浏览器地址栏,你会发现,一直在换,而我目前使用的则是第二种方式。

第二种:provide / inject 的方式

这种方式与Spring boot中的切面/注解有点类似,就是通过provideApp.vue为所有子组件注入一个reload方法,然后在需要使用的页面,通过inject注入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值