Vue 为 axios get 请求使用路由参数

Question

所以我正在构建我的第一个 vue 项目，我一直在尝试将路由参数传递给 axios get 请求，但它不起作用。这是页面的代码，它在用户点击 table 测试

中的动态 link 后呈现

<template>
  <v-app>

    <app-navbar />

    <v-main>
        <h3>test {{$route.params.name}}, {{$route.query.status}},{{$route.query.tag}}</h3>
        <h3>{{items}}</h3>
    </v-main>
  </v-app>
</template>

<script>
import appNavbar from '../../../components/appNavbar.vue';
import axios from "axios";
export default {
  components : {appNavbar},
  name: "App",
  data() {
    return {
      items: [],
    };
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3004/tests`,{ params: $route.params.name });
      this.items = res.data;
    } catch (error) {
      console.log(error);
    }
  },
};
</script>

<style lang="scss" scoped>

</style>

如何将路由参数传递给 axios get 函数？

Answer 1

这应该是 this.$route.params.name 在脚本中。

const res = await axios.get(`http://localhost:3004/tests`,{ params: this.$route.params.name });

Answer 2

Router.js const routes = [ { 路径：'path/:name'，名称：'Name'，组件：ComponentName，}]

Answer 3

我使用了@Nitheesh 的解决方案，我只需要指定参数名称就可以了解决方案：

const res = await axios.get(`http://localhost:3004/tests`,{ params: {name:this.$route.params.name} });

Vue 为 axios get 请求使用路由参数

Vue use route params for axios get request

javascript

vue.js

axios