vue route public

The general idea, a page, more buttons, click on the button will jump to a route; what value is passed through the father to decide to skip that route; ajax data is determined by judging pull that data

routing;

Export default { 
    routes: [ 
        { 
            path: ' / ' , 
            name: ' index ' , 
            Component: () => Import ( ' ./Index/index.vue ' ), 
            Children: [ 
                {     //     common that a routing 
                    path: ' / min ' , 
                    name: ' min ' , 
                    Component: () => Import ( ' ./Index/min.vue ')
                }
            ]
            
        },
        
    ]
}

Parent component

ajax preferably within parent components inside the hair, and then passed subassembly;

    <div>
         // click-pass value, and changes the type 
        <@ Button the Click = " Change ( 'A') " > . 1 </ Button> 
        <Button @ = the Click " Change ( 'B') " > 2 </ Button>
     // determines if there is not displayed 
        <V- min IF = " type.length == 0! " : type = " type " : Data = " Data " /> 
    </ div> 

<Script> 
Import min from  " ./min.vue";
export default{ 
    Data () { 
        return { 
            type: "" , 
            Data: '' // data 
        }; 
    }, 
    Components: { 
        min 
    }, 
    // change the monitor type and reassigned 
    Methods: { 
        Change (V) { 
            the console.log ( V); 
            the this .Type = V; 
        }, 
        // send Axios 
        the async AJ () {
             const {Data} = the await  the this .axios 
                . GET ( "https://www.tianqiapi.com/api/?version=v1")
                .then(data => data.data);
            this.data = data;
            console.log(data);
        },
        async ajx() {
            const { news } = await this.axios
                .get("http://meiriyikan.cn/api/json.php")
                .then(data => data.data);
            this.data = news;
            console.log(news);
        }
    },
    //Monitoring changes in the type of Type, and then change Axios 
    Watch: {
         ' type ' () {
             IF ( the this .Type == ' A ' ) {
                 the this .aj () 
            } the else  IF ( the this .Type == ' B ' ) {
                 the this .ajx () 
            } 
        } 
    } 
};
 </ Script>

Subassembly

    <div>
         //     accept his father pass over the value, the determination condition is displayed; 
        <div V- IF = " type == 'A' " > Data {} {} </ div> 
        <div V- IF = " type == 'B' " > Data {} {} </ div> 
    </ div> 

<Script> 
Import imgs from  " ./img " ; 
Export default { 
    The props: [ " type " , " Data " ] 
};
 </ script>

Like my little partner can focus on micro-channel public number "front-end pseudo-uncle."