vue組件復(fù)用，如何根據(jù)不同的router請求不同的接口？

個(gè)人覺得 使用router傳遞參數(shù)params或者query，拼接請求地址就ok，如果組件解構(gòu)只有一層 props實(shí)現(xiàn)不太現(xiàn)實(shí)

個(gè)人認(rèn)為首先你要統(tǒng)計(jì)一下你所有共用組件的接口的共性和異性，共性的寫死在組件就行了，異性的就在父組件使用prop傳值傳過來，如：

補(bǔ)充回答

// api.js
const activityApi = {
    // 獲取活動(dòng)列表
    getActivityList(params) {
        return ajax.jsonp(url, params);
    },
    // 獲取有活動(dòng)的游戲列表
    getActivityGameList(params) {
        return ajax.jsonp(url, params);
    },
}
export default activityApi;

父組件

<son-component :apiName="'getActivityList'" :params="params"></son-component>

子組件

import activityApi from 'activityApi.js';
export default {
    props:{
        apiName:{ // 接口名稱
            type:String,
            default:'getActivityList' // 此處可以填組件中共用接口最多的接口地址
        },
        params:{ // 接口參數(shù)
            type:Object,
            default:{}
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            activityApi[this.apiName](this.params).then((res)=>{
  
            })
        }
    }
}

也可以把url，參數(shù)key 都寫在router的路由配置里面啊

你可以把接口路徑字符串當(dāng)必填參數(shù)傳給組件，然后組件中接口請求設(shè)計(jì)成獲取prop中的字符串拼接

使用 prop 傳入url即可。

如果想定制型更強(qiáng)，可以要求傳入一個(gè)Promise

同一個(gè)組件路由不同的話，用
watch:{

$router(){}

}
就好了

組件暴露一個(gè)url的接口
使用組件的時(shí)候就可以傳入不同的url