Vue 与.Net Core WebApi交互时路由初探

Api:

 /// <summary>/// 根据id获取文章/// </summary>/// <param name="id"></param>/// <returns></returns>[HttpGet, Route("GetArticleById")]//api/article/GetArticleByIdpublic async Task<IActionResult> GetArticleById( int id){ApiResult<Article> apiResult = await _articleService.GetArticleById(id);return Ok(apiResult);}/// <summary>/// 通过文章编号，获取文章详情信息/// </summary>/// <param name="id">文章编号</param>/// <returns></returns>[HttpGet, Route("{id}")] //api/article/12public async Task<IActionResult> GetArticle(long id){Article article = await _articleService.FindAsync(id);ApiResult<Article> apiResult = new();apiResult.Data = article;apiResult.Code = article == null ? 404 : 200;apiResult.Message = article == null ? "文章详情信息不存在！" : "获取文章详情信息";return Ok(apiResult);}

我的接口中定义了两个方法，实现了同样的功能，但是对外提供的访问路由不同。

第一个是：//api/article/GetArticleById  然后接收一个int类型的参数，

第二个是：//api/article/12 12就是需要调用者直接提供的参数，12只是演示，当然也可以其他数字。

请求：

针对上方Api在Vue中对应的请求方式也有两种：

第一种：

 //定义参数
const correctedParams = {id: articleId ,};
const response = await request.get('/Article/GetArticleById', { params: correctedParams });

这种方法实际请求的url是：

/Article/GetArticleById?id=123  

（123也是演示用的）

然后就可以手动拼接：

request.get(`/Article/GetArticleById?id=${articleId }`);

注意这里是反引号 ` 而不是单引号 ' 。

但是手动拼接的话有一些隐患：

问题1：参数编码问题

// 如果文章ID包含特殊字符
const id = "123&type=test";
request.get(`/Article?id=${id}`); 
// → /Article?id=123&type=test (错误解析为两个参数)// 正确的方式会自动编码：
request.get('/Article', { params: { id: "123&type=test" } });
// → /Article?id=123%26type%3Dtest (正确编码)

问题2：多个参数时很麻烦

// 手动拼接很繁琐且容易出错
request.get(`/Article?id=${id}&category=${category}&page=${page}`);// 使用params对象更清晰
request.get('/Article', { params: { id, category, page } 
});

第二种：

const response = await request.get(`/Article/${articleId}`);

这种方法就直接把id当作路由的一部分来调用。

根据项目封装的axios接口不同，方法上可能有差异，这里只是引入一下我的经历作为参考。