关于vue.js:vue使用路由使用queryparams导航条的变化与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}})

浏览器搜寻框样子：

此时探索 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
    }
  })
}

后盾接管：