Vue中的刷新的几种方法

川长思鸟来 2023-02-28 11:13 23阅读 0赞

1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

  1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

3.解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

在app.vue里添加：

  1. <router-view v-if="isRouterAlive"></router-view>
  3. <template>
  4.     <div id="app">
  5.       <router-view v-if="isRouterAlive"></router-view>
  6.     </div>
  7. </template>
  9. <script type="module">
  10.     export default {
  11.         provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
  12.             return {
  13.                 reload: this.reload
  14.             }
  15.         },
  16.         data() {
  17.           return {
  18.               isRouterAlive : true
  19.           };
  20.         },
  21.         methods: {
  22.             reload () {
  23.                 this.isRouterAlive = false;            //先关闭，
  24.                 this.$nextTick(function () {
  25.                     this.isRouterAlive = true;         //再打开
  26.                 })
  27.             }
  28.         }
  29.     }
  30. </script>
  32. <style lang="less" scoped>
  34. </style>

在需要reload的页面里添加：

  1. inject:['reload'], //注入App里的reload方法
  3. this.reload();

发表评论

表情：
评论列表 （有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读