vue组件复用，如何根据不同的router请求不同的接口？

Question

项目开发中有很多地方的模块内容是相同或者高度相似的，但是路由来源不一样，在使用组件时怎么在组件中使用不同的接口？或者给相同的接口传不同的值？
我现在的做法是这样的：
在mounted中根据$route.name做判断，根据不同的来源请求不同的接口，或者是给不同的接口传不同的值，这样也能达到预期的效果，但总是感觉不是特别好。请问大神有没有更好的做法？

Answer 1

个人认为首先你要统计一下你所有共用组件的接口的共性和异性，共性的写死在组件就行了，异性的就在父组件使用prop传值传过来，如：

补充回答

// api.js
const activityApi = {
    // 获取活动列表
    getActivityList(params) {
        return ajax.jsonp(url, params);
    },
    // 获取有活动的游戏列表
    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:{ // 接口参数
            type:Object,
            default:{}
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            activityApi[this.apiName](this.params).then((res)=>{
  
            })
        }
    }
}

Answer 2

你可以把接口路径字符串当必填参数传给组件，然后组件中接口请求设计成获取prop中的字符串拼接

Answer 3

组件暴露一个url的接口
使用组件的时候就可以传入不同的url

Answer 4

也可以把url，参数key 都写在router的路由配置里面啊

Answer 5

使用 prop 传入url即可。

如果想定制型更强，可以要求传入一个Promise

Answer 6

同一个组件路由不同的话，用
watch:{

$router(){}

}
就好了

Answer 7

个人觉得 使用router传递参数params或者query，拼接请求地址就ok，如果组件解构只有一层 props实现不太现实