vue使用路由使用query，params导航条的变化与axios发起请求的携带参数与后端解析时拿到的参数一点点探究

一、vue路由携带的参数，params与query

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

通常配置的router的index.js，如果是一个详情页，那么一般路由变化只改变一个id就好了，然后由id来对后台发起网络请求，来请求不同详情的数据。

范例1：index.js配置动态路由，使用params方式：

比如我要写一个中国各个学校的详情页面，那么我要配置一个动态路由：

{
    path:'/schoolDetail/:id',
    name:'SchoolDetail',
    component:schoolDetail,
    meta:{
      title:'SchoolDetail'
    }
  },

上面我们只看path，后面的冒号表示id是一个变量，这个变量可以响应式变化，很符合vue的特点。
当我们使用语法跳转路由时（此时直接在地址上面加上你要跳转的id变量，就是params方式跳转）:

this.$router.push({ path:'/testDetail/'+id)

浏览器是这个样子的：

后面一大串的数字是id号。

范例2：index.js不用配置动态路由，使用query方式实现路由动态变化：

我们此时不用在index里面配置这个冒号id的话，其实在路由跳转配置也可以，那么来个例子：

{
    path:'/schoolDetail',
    name:'SchoolDetail',
    component:schoolDetail,
    meta:{
      title:'SchoolDetail'
    }
  },

当我们使用语法跳转路由时（直接定义个query的参数，此参数是一个对象，你可以往里面添加很多属性值，但是不要超过浏览器限制的长度就好了）:

this.$router.push({ path:'/schoolDetail/', query:{id:id}})

搜索框后面的id以问号分割：

范例3：你也可以同时配置，只不过搜索框的数字变多，且难看：

使用语法跳转路由（同时配置params及query参数）：

this.$router.push({ path:'/schoolDetail/'+id, query:{_id:_id}})

浏览器搜索框样子：

注：
由于详情页的组件通常是id变化而已，vue内部做了组件复用的处理，所以直接使用下面这个路由函数来获取数据重新渲染即可：

beforeRouteUpdate

给个范例：
当我只在mounted使用下列来请求数据时：

mounted{
 getSchool(this.$route.params.id).then((res)=>{
      this.p1 = res[0].school_brief
      this.p2 = res[0].camus_brief;
      this.title = res[0].school;
      this.img = res[0].school_img;
      this.corner_img = res[0].corner_img
      this.tag = res[0].tag[2]
    })
}

结果如下，只有导航栏的地址改变，但是数据不会重新渲染：

当我加上路由updated函数时：

mounted{
 getSchool(this.$route.params.id).then((res)=>{
      this.p1 = res[0].school_brief
      this.p2 = res[0].campus_brief;
      this.title = res[0].school;
      this.img = res[0].school_img;
      this.corner_img = res[0].corner_img
      this.tag = res[0].tag[2]
    })
}
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log("路由update");
       getSchool(to.params.id).then((res)=>{
      this.p1 = res[0].school_brief
      this.p2 = res[0].campus_brief;
      this.title = res[0].school;
      this.img = res[0].school_img;
      this.corner_img = res[0].corner_img
      this.tag = res[0].tag[2]
    })
    next();
  },

结果如下，导航栏的地址改变，并且数据会重新渲染：

此时探究vue的params与query跳转路由实验结束，开始进行axios的参数携带：

二、axios发起请求的携带参数与后端解析时拿到的参数

1.get请求携带参数，使用params

 axios.request({
    // method:"get",request
    url:"/school/schools",
    method:'get',
   params:{
    _id
   }
  })
}

值得注意的是，axios的参数好像没有query的对象，只有params对象，这个是我刚开始的时候疑惑的，因为我用params可以正确传参，用query这个对象，发现传参不了。下面是我复制的文档的参数配置

{
 // `url` is the server URL that will be used for the request
 url: '/user',
 // `method` is the request method to be used when making the request
 method: 'get', // default
 // `baseURL` will be prepended to `url` unless `url` is absolute.
 // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
 // to methods of that instance.
 baseURL: 'https://some-domain.com/api/',
 // `transformRequest` allows changes to the request data before it is sent to the server
 // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
 // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
 // FormData or Stream
 // You may modify the headers object.
 transformRequest: [function (data, headers) {
 // Do whatever you want to transform the data
 return data;
 }],
 // `transformResponse` allows changes to the response data to be made before
 // it is passed to then/catch
 transformResponse: [function (data) {
 // Do whatever you want to transform the data
 return data;
 }],
 // `headers` are custom headers to be sent
 headers: {'X-Requested-With': 'XMLHttpRequest'},
 // `params` are the URL parameters to be sent with the request
 // Must be a plain object or a URLSearchParams object
 params: {
 ID: 12345
 },
 // `paramsSerializer` is an optional function in charge of serializing `params`
 // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
 paramsSerializer: function (params) {
 return Qs.stringify(params, {arrayFormat: 'brackets'})
 },
 // `data` is the data to be sent as the request body
 // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
 // When no `transformRequest` is set, must be of one of the following types:
 // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
 // - Browser only: FormData, File, Blob
 // - Node only: Stream, Buffer
 data: {
 firstName: 'Fred'
 },
 // `timeout` specifies the number of milliseconds before the request times out.
 // If the request takes longer than `timeout`, the request will be aborted.
 timeout: 1000, // default is `0` (no timeout)
 // `withCredentials` indicates whether or not cross-site Access-Control requests
 // should be made using credentials
 withCredentials: false, // default
 // `adapter` allows custom handling of requests which makes testing easier.
 // Return a promise and supply a valid response (see lib/adapters/README.md).
 adapter: function (config) {
 /* ... */
 },
 // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
 // This will set an `Authorization` header, overwriting any existing
 // `Authorization` custom headers you have set using `headers`.
 auth: {
 username: 'janedoe',
 password: 's00pers3cret'
 },
 // `responseType` indicates the type of data that the server will respond with
 // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
 responseType: 'json', // default
 // `responseEncoding` indicates encoding to use for decoding responses
 // Note: Ignored for `responseType` of 'stream' or client-side requests
 responseEncoding: 'utf8', // default
 // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
 xsrfCookieName: 'XSRF-TOKEN', // default
 // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
 xsrfHeaderName: 'X-XSRF-TOKEN', // default
 // `onUploadProgress` allows handling of progress events for uploads
 onUploadProgress: function (progressEvent) {
 // Do whatever you want with the native progress event
 },
 // `onDownloadProgress` allows handling of progress events for downloads
 onDownloadProgress: function (progressEvent) {
 // Do whatever you want with the native progress event
 },
 // `maxContentLength` defines the max size of the http response content in bytes allowed
 maxContentLength: 2000,
 // `validateStatus` defines whether to resolve or reject the promise for a given
 // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
 // or `undefined`), the promise will be resolved; otherwise, the promise will be
 // rejected.
 validateStatus: function (status) {
 return status >= 200 && status < 300; // default
 },
 // `maxRedirects` defines the maximum number of redirects to follow in node.js.
 // If set to 0, no redirects will be followed.
 maxRedirects: 5, // default
 // `socketPath` defines a UNIX Socket to be used in node.js.
 // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
 // Only either `socketPath` or `proxy` can be specified.
 // If both are specified, `socketPath` is used.
 socketPath: null, // default
 // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
 // and https requests, respectively, in node.js. This allows options to be added like
 // `keepAlive` that are not enabled by default.
 httpAgent: new http.Agent({ keepAlive: true }),
 httpsAgent: new https.Agent({ keepAlive: true }),
 // 'proxy' defines the hostname and port of the proxy server.
 // You can also define your proxy using the conventional `http_proxy` and
 // `https_proxy` environment variables. If you are using environment variables
 // for your proxy configuration, you can also define a `no_proxy` environment
 // variable as a comma-separated list of domains that should not be proxied.
 // Use `false` to disable proxies, ignoring environment variables.
 // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
 // supplies credentials.
 // This will set an `Proxy-Authorization` header, overwriting any existing
 // `Proxy-Authorization` custom headers you have set using `headers`.
 proxy: {
 host: '127.0.0.1',
 port: 9000,
 auth: {
 username: 'mikeymike',
 password: 'rapunz3l'
 }
 },
 // `cancelToken` specifies a cancel token that can be used to cancel the request
 // (see Cancellation section below for details)
 cancelToken: new CancelToken(function (cancel) {
 })
}

附上文档地址，这个网站的文档可能不是最新的，但是足以解决你开发的使用了：axios文档

上面说了，axios好像没有query这个参数对象，那么就是说params里面携带的参数可以进行某种配置，让后端既可以使用params接收也可以通过query接收吗？
老实说我不知道，所以当我使用params携带我需要传递的信息时：

 axios.request({
    // method:"get",request
    url:"/school/schools",
    method:'get',
   params:{
    _id
   }
  })
}

发现后台打印：

此时的params的参数为空，只有query参数可以看到，所以我觉得axios使用get请求的参数是只通过query查询。

2.post请求携带参数，使用data
axios的post请求的参数写在data里面，上面我复制的文档也写了，此时参数传给后台时，是放在请求参数的body里面的，可以使用req.body获取:
范例：

axios.request({
    // method:"get",request
    url:"/login",
    method:'post',
    data:{
      myStatus,//表示学生还是老师
      username,
      password
    }
  })
}

后台接收：