vue刷新当前页面 reload【provide/inject】

vue刷新当前页面有挺多种方法，比如 window.location.reload() 或者 this.$router.go(0)

但是这两种方法是会出现一瞬间的白屏，体验不好，所以这里给大家推荐第三种比较好用的刷新页面的方法

完整例子

主要是利用provide/inject 的应用
home.vue 定义

  1. <template>
  2.   <div>
  3.     <!-- 导航 -->
  4.     <Nav/>
  6.     <router-view v-if="isRouterAlive"/>     // 2、通过isRouterAlive刷新路由
  7.   </div>
  8. </template>
  10. <script>
  11.   import Nav from './module/Nav.vue';
  13.   export default {
  14.     components:{
  15.       Nav, // 侧边栏
  16.     },
  17.     data(){
  18.       return {
  19.         isRouterAlive: true        // 1、这个属性名可以自己定义，默认值为true
  20.       }
  21.     },
  23.     // 4、父组件提供reload方法
  24.     provide () {
  25.       return {
  26.         reload: this.reload
  27.       }
  28.     },
  29.     methods:{
  30.       // 3、刷新的方法
  31.       reload () {
  32.         this.isRouterAlive = false
  33.         this.$nextTick(function() {
  34.            this.isRouterAlive = true
  35.         })
  36.       },
  37.     }
  38.   }
  39. </script>

Nav.vue 调用

  1. <template>
  2.   <div>
  3.     <p v-for="item in menuList" @click="getRoute(item)">{{item.meta.name}}</p>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default{
  9.     // 1、子组件获取home.vue定义的reload方法
  10.     inject: ['reload'],
  11.     data(){
  12.       return {
  13.         menuList: [{
  14.           path: '/',
  15.           name: 'Home',
  16.           meta:{name: '首页'}
  17.         },{
  18.           path: '/list'
  19.           name: 'List',
  20.           meta:{name: '列表'}
  21.         },{
  22.           path: '/info'
  23.           name: 'Info',
  24.           meta:{name: '介绍'}
  25.         }]
  26.       }
  27.     }
  28.     methods: {
  29.       getRoute(item){
  30.         if(item.name == 'List')
  31.           this.reload();            // 2、调用home.vue定义的方法
  32.         }else{
  33.           this.$router.push(item.name);
  34.         }
  35.       }
  36.     }
  37.   }
  38. </script>

参考文献

vue刷新当前页面