Vue中如何通过Router Link传参实现单一组件动态调用API？

1. 调整路由配置 #

把原来多个重复的路由合并成一个带动态参数的路由，指向同一个组件：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入你要复用的单组件（比如命名为StoreData.vue）
import StoreData from '../components/StoreData.vue'

Vue.use(VueRouter)

const routes = [
  // 替换原来的/home、/GM11等路由
  {
    path: '/store/:storeId', // :storeId是动态参数，用来传递API后缀
    name: 'StoreData',
    component: StoreData
  }
]

const router = new VueRouter({ routes })
export default router

2. 更新路由链接（router-link） #

将固定路径改为带参数的动态路径，把API后缀作为参数传递：

<li class="nav-item m-2">
  <router-link class="btn btn-light btn-outline-primary" to="/store/Store10">GM10</router-link>
</li>
<li class="nav-item m-2">
  <router-link class="btn btn-light btn-outline-primary" to="/store/Store11">GM11</router-link>
</li>

这里Store10/Store11就是要传给API的后缀，对应路由里的:storeId参数。

3. 修改单组件逻辑，动态调用API #

把原来多个组件的逻辑合并到StoreData.vue中，通过路由参数动态拼接API路径：

<template>
  <!-- 这里保留你原来组件的模板内容即可 -->
  <div>
    <h2>门店数据</h2>
    <ul>
      <li v-for="item in chasier" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import variables from '../path/to/variables' // 你的API地址变量文件

export default {
  data() {
    return {
      chasier: []
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      // 从路由参数中拿到storeId
      const storeId = this.$route.params.storeId
      // 动态拼接API路径
      axios.get(`${variables.API_URL}${storeId}`)
        .then(response => {
          this.chasier = response.data
        })
        .catch(err => console.error('加载数据失败:', err))
    }
  },
  // 监听路由参数变化，切换门店时重新加载数据
  watch: {
    '$route.params.storeId'() {
      this.chasier = []
      this.refreshData()
    }
  }
}
</script>

额外说明 #

• 如果是Vue 3项目，路由参数的获取需要用useRoute()钩子：

  import { useRoute } from 'vue-router'
  
  export default {
    setup() {
      const route = useRoute()
      // 获取参数：route.params.storeId
    }
  }
  

• 如果需要把显示的GM10和API后缀Store10做映射，可以在组件里加个映射表：

  const storeMap = {
    GM10: 'Store10',
    GM11: 'Store11'
  }
  // 路由参数传GM10，组件里转成Store10
  const storeId = storeMap[this.$route.params.storeId]
  

内容的提问来源于stack exchange，提问作者L8 ReaperX