vue刷新页面的三种方法

「爱情、让人受尽委屈。」 2023-01-02 06:30 204阅读 0赞

一、使用location对象的reload()方法

reload()方法用于刷新当前文档，类似于你浏览器上的刷新页面按钮。

  1. location.reload();

二、使用编程式导航

router.go 被用来作为后退/前进导航

  1. this.$router.go(0); //表示跳转到当前页面

三、使用provide与inject

vue提供了provide和inject帮助我们解决多层次嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

1.在app.vue中写入如下代码

  1. <template>
  2.   <div id="app">
  3.     <router-view v-if="isShow"></router-view>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'App',
  10.   provide(){
  11.     return {
  12.       reload:this.reload
  13.     }
  14.   },
  15.   data(){
  16.     return {
  17.       isShow:true
  18.     }
  19.   },
  20.   methods:{
  21.     reload(){
  22.       this.isShow=false;
  23.       this.$nextTick(()=>{
  24.         this.isShow=true;
  25.       })
  26.     }
  27.   }
  28. }
  29. </script>

2.在需要刷新的页面

  1. <script>
  2.     export default {
  3.           inject:['reload']
  4.       }
  6.     //需要刷新的地方
  7.     this.reload();
  8. </script>

发表评论

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

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

相关阅读