vue query 和 params 传参的区别

query 和 params 传参的区别

通过 url 传递参数控制页面显示数据的两种方式

1. query 传统问号传参

• url 格式：xxx.com/product?id=123
• 模板内获取数据：this.$route.query.id

2. params 动态路由匹配

• url 格式：xxx.com/product/123
• 模板内获取数据：this.$route.params.id
• 注意这个方式参数字段名 id 要在路由配置中定义 用冒号的形式标记
• 参数可以继续拼接 /student/:id/:name/:age/:address
• 他必须严格按照 url 的配置格式访问

3. 如何选择哪一个传参方式

两个并没有高低之分

• 动态路由, 优点 ,好看整齐 缺点 必须预先定义, 如果参数多起来多起来不好管控
• 问号的形式 灵活随意想改就改, 想加就加, 缺点就是太丑陋了, 也不直观

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

复制

query 传参配置的是path，而params传参配置的是name，在params中配置path无效

query在路由配置不需要设置参数，而params必须设置

query传递的参数会显示在地址栏中

params传参刷新会无效，但是query会保存传递过来的值，刷新不变 ;

接收参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

//query:
  {
  path: '/home',
  name: Home,
  component: Home
  }
  
 // params:
  {
  path: '/home/:id',
  name: Home,
  component: Home
  }

复制

接口封装

import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
import store from '@/store'

// 创建一个 axios 实例
const service = axios.create({
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// 请求拦截
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (config.isLoading) loadingInstance = Vue.prototype.$baseLoading()
    if (process.env.NODE_ENV === 'development') {
      config.headers['debugMode'] = 'true'
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.intRes === 1) { // 登录请求退出
      if (store.getters.empId) { // 如果登录过，提示会话失效
        Vue.prototype.$baseConfirm('会话已失效请重新登录', '会话失效', () => {
          window.location.href = process.env.VUE_APP_BASE_SSO_URL + window.location.href
        })
      }
      return res
    }
    if (res.intRes !== 0) {
      const msg = isEmpty(res.objRes) ? res.msgRes : res.objRes
      Vue.prototype.$baseMessage(msg, 'warning')
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error.response)
  }
)

//  get 和 post 请求封装

export default {
  
  get(url,params){
     return service.get(url,{params:params})
   },
   
   postJson(url,data){
     return service.post(url,data,
     {
       headers:{'ContentType':'application/json'}
     })
   },
   
   postForm(url, data, isLoading = true) {
    return service.post(url, qs.stringify(data), {
      isLoading: isLoading,
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
  },
   
   }

 

来源：https://cloud.tencent.com/developer/article/1848975