Vue, 用components引入，tab切换页如何加载数据？

Question

这是页面结构

tab切换页：

<template>
    <div id="rank">
        <div id="fixed">
            <common-header :head.sync="head"></common-header>
        </div>

        <!-- content -->
        <section class="content" id="content">
            <div class="scroll">
                <div class="ui-tab" id="ui-tab">
                    <div class="ui-tab-hd">
                        <span class="ui-tab-btn"
                              v-for="tab in tabs"
                              :class="{'active': $index === selected}"
                              @click="choose($index)">{{tab.tabName}}</span>
                    </div>
                    
                    <component :is="currentView" transition="fade" transition-mode="out-in"></component>
                </div>

                <!--<div class="md-empty">-->
                    <!--<i class="warning-board"></i>-->
                    <!--<p>暂无排名数据</p>-->
                <!--</div>-->
            </div>
        </section>


    </div>
</template>
<script type="text/ecmascript-6">

    require('../../assets/Pages/Rank/rank.css')

    export default{
        data(){
            return{
                head:{
                    title:'CFA排名',
                    message:false,
                    download:false
                },
                tabs:[
                    {tabName:"月排名"},
                    {tabName:"总排名"}
                ],
                selected:0,
                currentView:'rank_tab_0'
            }
        },
        methods:{
            choose(index){
                this.selected = index;
                this.currentView = 'rank_tab_' + index;
            }
        },
        computed:{
            gameLength(){
                return !tool.isEmptyObj(this.recordData);
            }
        },
        components:{
          'rank_tab_0':require('../../components/Rank/monthrank.vue'),
            'rank_tab_1':require('../../components/Rank/totalrank.vue')
        }
    }
</script>

切换的模板页rank_tab_0 && rank_tab_1 （相同结构就不再贴代码了)

<template>

    <div class="ui-tab-bd">
        <div class="ui-tab-md active">
            <ul class="ranklist">
                <li v-for="(key,val) in monthRank">
                    <div class="num">{{val.uid}}</div>
                    <div class="img">
                        <img :src=val.avatarpath alt="">
                    </div>
                    <div class="name">{{val.nickname}}</div>
                    <div class="state">币：{{val.monthsum}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        data(){
            return{
                monthRank:[]
            }
        },
        methods:{
            //广播验证事件
            broadcast(msg){
                this.$broadcast('error', msg);
            },
            //loading
            loading(state){
                this.$broadcast('loading', state);
            },
            getMonthData(){
                let _this = this;
                _this.monthRank = [];
                _this.loading('show');
                $.fn.ajax({
                    type: 'GET',
                    url:'http://127.0.0.1:1236',
                    dataType: 'jsonp',
                    jsonp: 'jsoncallback',
                    jsonpCallback: "jsoncallback"
                }).then((data)=> {
                    if(data.status === 0){
                    _this.monthRank = data.result;
                }
            }).catch(()=> {
                    _this.broadcast(data.info);
            }).then(()=> {
                    this.loading('hide');
            }).catch(()=> {
                    console.log('error');
            })
            }
        },
        computed:{
            gameLength(){
                return !tool.isEmptyObj(this.recordData);
            }
        },
        route:{
            data(){
                this.getMonthData();
            }
        }
    }
</script>

我想问题是出在这里，但是我把生命周期都试过了都不行：（可能是我漏了哪个求指点）

route:{
    data(){
        this.getMonthData();
    }
}

Answer 1

demo拿走不谢https://github.com/TIGERB/eas...