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

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

前言第一种：中转站的方式第二种：provide / inject 的方式

前言

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

第一种：中转站的方式

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

第二种：provide / inject 的方式

这种方式与Spring boot中的切面/注解有点类似，就是通过provide让App.vue为所有子组件注入一个reload方法，然后在需要使用的页面，通过inject注入即可、请看代码：

<template><div id="app"><router-view v-if="isRouterAlive"></router-view></div></template><script>export default {name: "App",provide() {return {reload: this.reload};},data() {return {isRouterAlive: true}},methods: {reload() {this.isRouterAlive = false;this.$nextTick(function() {this.isRouterAlive = true;});}}};</script>

在需要调用的子页面：

<template><!--你的子页面布局--></template><script>export default {//...inject: ['reload'],methods: {delData(){//在axios成功的回调里面this.reload();}}//...}</script>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我的支持。😘✔

当然也可以去我的博客梦想小筑与我交流。