Nuxt + axios ...how要在axios url中添加{{this.$route.params}}？

在使用Nuxt.js结合axios时，如果你想在请求的URL中动态添加当前路由的参数（例如this.$route.params），可以通过几种方式实现。以下是一种常见的方法：

基础概念

• Nuxt.js：一个基于Vue.js的通用应用框架，允许你使用Vue.js开发服务端渲染的应用。
• axios：一个基于Promise的HTTP客户端，用于浏览器和node.js。
• 路由参数：在Nuxt.js中，路由参数是通过this.$route.params访问的，这些参数通常用于构建动态URL。

相关优势

• 动态URL构建：允许根据不同的路由参数发送请求到不同的后端服务。
• 代码复用：可以在多个组件中复用相同的axios配置，只需更改动态部分。

类型与应用场景

• 类型：这是一个前端开发中的常见需求，特别是在构建单页应用（SPA）时。
• 应用场景：当你需要根据用户的操作或当前页面的上下文向后端发送请求时，例如获取特定ID的用户信息。

解决方案

你可以在Nuxt.js的插件系统中配置axios，使其全局可用，并且可以访问当前的路由信息。以下是一个示例：

// plugins/axios.js
export default function ({ $axios, store, redirect, route }) {
  // 请求拦截器
  $axios.onRequest(config => {
    // 动态添加路由参数到URL
    if (route.params.id) {
      config.url += `/${route.params.id}`;
    }
    return config;
  });
}

然后在nuxt.config.js中注册这个插件：

// nuxt.config.js
export default {
  // ...
  plugins: [
    '~/plugins/axios.js'
  ],
  // ...
}

这样，每次发出axios请求时，都会自动检查当前路由参数，并将其添加到请求URL中。

遇到的问题及解决方法

如果你遇到了问题，比如路由参数没有正确添加到URL中，可能的原因包括：

• 插件注册顺序：确保axios插件在其他可能使用axios的插件之前注册。
• 路由参数访问：确保在插件中正确访问route.params。
• 配置错误：检查nuxt.config.js中的插件配置是否正确。

参考链接

• Nuxt.js官方文档 - Axios模块
• Nuxt.js官方文档 - 插件系统

通过上述方法，你可以确保在Nuxt.js应用中使用axios时，能够动态地将路由参数添加到请求URL中。