（13）vue刷新页面

逃离我推掉我的手 2022-10-01 12:51 274阅读 0赞

常用的有三种方法，最后一种用的比较多：

1.使用window.location.href window.location.replace() window.location.reload()

会出现空白，体验不是很好

2.先进入一个空路由，然后返回

  1. reflashPage(){
  2.     let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
  3.     this.$router.push(NewPage);
  4.     this.$router.go(-1);
  5. }

刷新后点浏览器的前进按钮会出现空白页

3.使用 provide / inject

简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

app.vue

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

需要跳转的页面： 前面会有这个 inject引入

  1. export default {
  2.     inject:['reload'],
  3.     data () {
  4.         return {
  5.         ...
  6.         }
  7.     },

后面想刷新当前页面的地方这样写：

  1. this.reload();

发表评论

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

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

相关阅读