问题:在最新课程页面(NewBook.vue)点击某一项课程,通过传递该课程的 id 跳转至课程详情页(Bookdetail.vue),采取的跳转方式是声明式导航,即 <router-link :to="{ path: '/newcourse', query: { id: item.courseCode } }"></router-link>

先看最新课程页面代码:

下面是详情页面代码,使用async发起异步请求,接收数据是没有问题的

但是在使用axios.then接收数据的时候出现了问题,

于是百度查询,看到了一个类似的代码,但是它能正常接收数据,它的代码如下:

发现它的请求路径没有携带params参数,是把id拼接到路径当中,于是我也尝试使用拼接,去掉params参数,果然成功了

但是为什么不能使用params参数呢?百度之后终于找到原因了!参考https://segmentfault.com/q/1010000014743286

解决方法:当我们使用params参数时,此时发起的网络请求路径是这样的:

当我们不使用params,而是采取路径拼接,路径是这样的:

我们可以看出明显的区别!!!其实问题就出在请求路径上面了,后台的接口设置是这样的:

它并没有设置需要传递params,所以对params参数没有进行处理,当我们传递params的时候,路径里会含有?id=,所以请求不到数据

所以在使用axios发起get请求的时候,需要根据后台接口设置来判断是否需要传递params,好了,问题解决,可以安心睡觉觉了,晚安~

接收某项课程id,通过axios发起get请求,由于携带params出现的问题(已解决)的更多相关文章

  1. axios拦截器请求头携带token

    转—— https://github.com/superman66/vue-axios-github/blob/master/src/http.js

  2. Vue2使用Axios发起请求教程详细

    当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述 本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试 Controll ...

  3. python接收axios的post请求,并处理后返回数据

    公司的python工程师不会js和python数据交互,所以我就去试了一下. 首先安装python,django框架和django-cors-headers. python官网下载,按提示操作,记住最 ...

  4. [Java] 两种发起POST请求方法,并接收返回的响应内容的处理方式

    1.利用apache提供的commons-httpclient-3.0.jar包 代码如下: /** * 利用HttpClient发起POST请求,并接收返回的响应内容 * * @param url ...

  5. 使用axios优雅的发起网络请求

    原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...

  6. java中两种发起POST请求,并接收返回的响应内容的方式  (转)

    http://xyz168000.blog.163.com/blog/static/21032308201162293625569/ 2.利用java自带的java.net.*包下提供的工具类 代码如 ...

  7. 查询各科成绩最高和最低的分:以如下形式显示:课程ID,最高分,最低分

    SELECT L.C# As 课程ID,L.score AS 最高分,R.score AS 最低分 FROM SC L ,SC AS R WHERE L.C# = R.C# and L.score = ...

  8. vue --- axios发post请求后台接收不到参数的三种解决方案

    最近用vue  做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...

  9. Vue系列之 => 通过vue-resource发起ajax请求

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Element-UI:级联选择器:Cannot read property 'level' of null"

    当级联选择时如果其选择内容需要动态变化时,如果没有选择就不会报错的:而当做出选择后又要动态变化级联选择器内容时,就会报错/ 错误:这个错误的原因是当选择后,再更新内容时,选择器仍会关联原来的数据,导致 ...

  2. 在Ubuntu下部署Flask项目

    FlaskDemo 命名为test.py # coding=utf-8 from flask import Flask app = Flask(__name__) @app.route("/ ...

  3. 命令执行漏洞攻击&修复建议

    应用程序有时需要调用一些执行系统命令的函数,如在PHP中,使用system.exec.shell_exec.passthru.popen.proc_popen等函数可以执行系统命令.当黑客能控制这些函 ...

  4. python数据结构实现(栈和链栈)

    栈 class Stack: def __init__(self, limit: int 10): self.stack = [] self.limit = limit def __bool__(se ...

  5. spark textfile rdd 日记

    批量处理模板方法, 核心处理方法为内部方法 def batchProces(sc: SparkContext, locationFlag: Int, minid: Int, maxid: Int, n ...

  6. Mbedtls和Opesnssl 解码x509Certificate

    最近项目需要添加解码x509Certificate功能,可以使用openssl或者mbedtls库.对这两个库的使用总结一下. 一 Openssl解码x509 Certificate 1. 初始化   ...

  7. 引用类型之Array(一)

    Array类型 除了Object之外,Array类型在ECMAScript中也很常用.ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类 ...

  8. Lyndon Word相关

    Lyndon Word 定义 对于字符串 \(S\),若 \(S\) 的最小后缀为其本身,那么称 \(S\) 为 \(\text{Lyndon}\) 串(\(\text{Lyndon Word}\)) ...

  9. GAN网络之入门教程(五)之基于条件cGAN动漫头像生成

    目录 Prepare 在上篇博客(AN网络之入门教程(四)之基于DCGAN动漫头像生成)中,介绍了基于DCGAN的动漫头像生成,时隔几月,序属三秋,在这篇博客中,将介绍如何使用条件GAN网络(cond ...

  10. Oracle数据库中的大对象(LOB)数据类型介绍

    一.LOB数据类型的介绍 大对象(LOB)数据类型允许我们保存和操作非结构化和半结构化数据,如文档.图形图像.视频片段.声音文件和XML文件等.DMBS_LOB 包被设计用于操作 LOB 数据类型.从 ...