Vue.js VueJS-一个组件，但向两个不同的地址发出请求

我有一个组件MainTable，它呈现一个我在其中显示任务的表：

({title: String, body: String, etc.}). 

该组件还触发

created

methodhook，向我的API发出

http://localhost:3000/api/v1/tasks

我希望有一个按钮，带有指向所有

complete_tasks

的链接（路由），其中我还希望呈现包含所有完整任务的同一个表（因此我将其作为一个组件）

不过，这次我希望该组件向另一个地址发出请求，以

http://localhost:3000/api/v1/tasks/complete_tasks

（获取所有完成的任务）

有可能做到这一点吗

//App.vue

<template>
  <div class="container">
    <div class="row">
      <h2>Todos</h2>
      <mainTable></mainTable>
    </div>
  </div>
</template>

<script>
  import MainTable from './components/MainTable.vue'
  export default {
    components: {
      'mainTable': MainTable
    },
    methods: {
    }
  }
</script>

//MainTable.vue

<template>
  <table class="table table-sm table-striped">
    <thead>
      <tr>
        <th>Title</th>
        <th>Content</th>
        <th colspan="3"></th>
        <th><select-all-button></select-all-button></th>
        <th><finishButton></finishButton></th>
        <br>
        <th><removeAllButton></removeAllButton></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="task in tasks">
        <td>{{ task.title }}</td>
        <td>{{ task.content }}</td>
        <td><a href="#">Show</a></td>
        <td><a href="#">Edit</a></td>
        <td><a href="#">Delete</a></td>
      </tr>
    </tbody>
  </table>
</template>
<script>
  import SelectAllButton from './buttons/SelectAll.vue';
  import FinishButton from './buttons/FinishButton.vue';
  import RemoveAllButton from './buttons/RemoveAllButton.vue';

  export default {
    components: {
      'select-all-button': SelectAllButton,
      'finishButton': FinishButton,
      'removeAllButton': RemoveAllButton
    },
    data(){
      return {
        tasks: []
      }
    },
    created(){
      this.$http.get('tasks').then(function(data){
        this.tasks = data.body.slice(0,20);
      })
    }
  }
</script>

//App.vue
待办事项
从“./components/MainTable.vue”导入MainTable
导出默认值{
组成部分：{
“mainTable”：mainTable
},
方法：{
}
}
//MainTable.vue
标题
内容


{{task.title}}
{{task.content}
从“./buttons/SelectAll.vue”导入SelectAllButton；
从“./buttons/FinishButton.vue”导入FinishButton；
从“./buttons/RemoveAllButton.vue”导入RemoveAllButton；
导出默认值{
组成部分：{
“全选按钮”：全选按钮，
“finishButton”：finishButton，
“removeAllButton”：removeAllButton
},
数据（）{
返回{
任务：[]
}
},
创建（）{
这是.http.get（'tasks'）。然后是（函数（数据）{
this.tasks=data.body.slice（0,20）；
})
}
}

是的，当然可以 您可以在单击时创建一个方法触发器 当按下按钮时，向端点发出请求并获取数据 并使用新数据更新对象任务

---

清楚吗？

我知道，但我的情况很特殊。我有一个组件，我想在两个不同的路线渲染。假设在页面加载时，我呈现组件，并且我还有一个按钮“完成任务”，它将我带到另一条路径，在那里我也呈现相同的组件，但不同的任务。在页面加载时，我请求地址'/api/v1/tasks'，以获取数据并在组件中显示它们。在“完成任务”路径上，我还呈现组件，但这次我想请求“/api/v1/tasks/complete_tasks”，获取数据并在组件中呈现它们。这有意义吗？我理解您，在前端，您希望例如转到“/route1”打开组件，说“X”，请求“/api/v1/tasks”。。。。也可以转到“/route2”这个打开的组件“X”，请求“/api/v1/tasks/complete_tasks”，对吗@完全正确！这就是我所需要的。如果路由为“route1”，则使用名称创建路由，并检查路由名称，向“/api/v1/tasks”发出请求，否则向同一组件中的“/api/v1/tasks/complete_tasks”发出请求？！