如何在外部JS文件中获取路由Params中的ID？

方法一：调用API时直接传入id（推荐） #

这是低耦合、易维护的最优方案，组件中已经拿到目标id，调用API方法时直接传入即可。

1. 修改api.service.js，让请求方法接收id参数：

// api.service.js
import axios from 'axios';
import { authHeader } from './auth-header';

const API_URL = '你的实际API地址';

export const getProducts = (id) => {
  return axios.get(`${API_URL}/product/all?id=${id}`, { headers: authHeader() })
    .then(res => res.data);
};

2. 在home.vue的onChange方法中，调用API时传入id：

// home.vue
import { getProducts } from '@/services/api.service.js'; // 按项目实际路径导入

export default {
  // 其他组件代码...
  methods: {
    onChange(event) {
      const id = event.value.value;
      // 跳转路由
      this.$router.push({
        name: this.$router.currentRoute.value.name, 
        params: { id }
      });
      // 调用API并传入id
      getProducts(id).then(data => {
        // 处理返回的产品数据
        console.log(data);
      });
    }
  }
};

方法二：在API文件中直接获取路由实例（耦合性较高） #

如果需要让API层直接读取路由参数，需先确保路由实例可被导入，再根据Vue版本获取参数：

Vue3 实现方式 #

1. 在路由配置文件（如router/index.js）中导出路由实例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // 你的路由配置项
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

2. 在api.service.js中导入路由实例并读取id：

// api.service.js
import axios from 'axios';
import { authHeader } from './auth-header';
import router from '@/router/index.js';

const API_URL = '你的实际API地址';

export const getProducts = () => {
  const id = router.currentRoute.value.params.id; // Vue3中currentRoute是ref对象，需取.value
  return axios.get(`${API_URL}/product/all?id=${id}`, { headers: authHeader() })
    .then(res => res.data);
};

3. 在home.vue中直接调用API方法：

// home.vue
import { getProducts } from '@/services/api.service.js';

export default {
  methods: {
    onChange(event) {
      const id = event.value.value;
      this.$router.push({
        name: this.$router.currentRoute.value.name, 
        params: { id }
      });
      // 无需传参，直接调用API
      getProducts().then(data => {
        console.log(data);
      });
    }
  }
};

Vue2 实现方式 #

1. 在路由配置文件中导出路由实例：

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // 你的路由配置项
];

const router = new VueRouter({
  routes
});

export default router;

2. 在api.service.js中读取路由参数：

// api.service.js
import axios from 'axios';
import { authHeader } from './auth-header';
import router from '@/router/index.js';

const API_URL = '你的实际API地址';

export const getProducts = () => {
  const id = router.currentRoute.params.id; // Vue2中直接访问currentRoute的params
  return axios.get(`${API_URL}/product/all?id=${id}`, { headers: authHeader() })
    .then(res => res.data);
};

注意：方法二会让API层强依赖路由实例，不利于API方法的单独测试和复用，建议优先使用方法一。

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