vue路由公用

大体思路，一个页面，多个按钮，点击按钮后都跳转到一个路由；通过父亲传的值是什么，来决定跳那个路由；ajax数据也是通过判断来决定拉那个数据

路由；

export default {
    routes: [
        {
            path: '/',
            name: 'index',
            component: ()=>import ('./Index/index.vue'),
            children:[
                {    //    公用这个一个路由
                    path: '/min',
                    name: 'min',
                    component: ()=>import ('./Index/min.vue')
                }
            ]

        },

    ]
}

父组件

ajax最好在父组件里面发，然后传给子组件；

    <div>
        //点击后传给值，并且改变type
        <button @click="change('A')">1</button>
        <button @click="change('B')">2</button>
    //判断有没有的话就不显示
        <min v-if="type.length !== 0" :type="type" :data="data"/>
    </div>

<script>
import min from "./min.vue";
export default {
    data() {
        return {
            type: "",
            data :''//数据
        };
    },
    components: {
        min
    },
    //监控type的变化并且重新赋值
    methods: {
        change(v) {
            console.log(v);
            this.type = v;
        },
        //发axios
        async aj() {
            const { data } = await 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);
        }
    },
    //监控type的类型变化，然后改变axios
    watch:{
        'type'(){
            if(this.type =='A'){
                this.aj()
            }else if(this.type == 'B'){
                this.ajx()
            }
        }
    }
};
</script>

子组件

    <div>
        //    接受父亲传过来的值，判断条件来显示那个；
        <div v-if="type== 'A'">{{data}}</div>
        <div v-if="type== 'B'" >{{data}}</div>
    </div>

<script>
import imgs from "./img";
export default {
    props: ["type", "data"]
};
</script>

喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”