【vue/cli3+】实现路由刷新页面

前言

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

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>

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

上一篇:vue-cli3 引入 cesium


下一篇:vue-cli3 配置多坏境打包