请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

    广告招商

    vue如何刷新当前的页面,不论有多级子集路由

    2019-3-23 16:28| 发布者: admin| 查看: 140| 评论: 0

    摘要: :在管理后台,在执行完,增,删,改,操作的时候。我们需要刷新一下页面,重载数据。在JQ中我们会用到location.reload()方法,刷新页面;在vue中,这里需要用到一个 provide / inject 这对用例。 ...
    在管理后台,在执行完,增,删,改,操作的时候。我们需要刷新一下页面,重载数据。在JQ中我们会用到location.reload()方法,刷新页面;在vue中,这里需要用到一个 provide / inject 这对用例。
    1,父级路由的内容

    <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
           })
        }
      },
      components:{
      }
    }
    </script>
    2,子组件引用
    name:'xx',
    inject:['reload'],
    data(){
    return {
    //.....
    }
    }

    3,在执行的地方刷新数据

    this.reload();

    鲜花
    鲜花
    握手
    握手
    雷人
    雷人
    路过
    路过
    鸡蛋
    鸡蛋