vue query 和 params 传参的区别
Vue 区别 Query 传参 params
2023-09-27 14:26:04 时间
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
相关文章
- vscode+eslint自动格式化vue代码的方法
- vue全局路由守卫beforeEach+token验证+node
- 精品微信小程序ssm的医院体检管理系统+后台前后分离VUE
- vue.js v-for绑定和非绑定key的区别
- vue $mount 和 el的区别
- vue-element 对话框的使用?
- vue中extend/component/mixins/extends的区别
- vue项目实战:函数式组件、组件传值、组件守卫、路由传参的方式区别、生命周期、常用语法汇总等 localStorage、sessionStorage作用域以及使用异同
- Vue.js中 computed 和 methods 的区别
- Vue起步
- 动态组件 :is与is区别 vue.js
- vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
- vue-router路由跳转的三种方式
- Vue.use与Vue.prototype的区别及说明
- vue Computed与methods区别
- 【Vue 开发实战】基础篇 # 11:指令的本质是什么
- 关于 Vue 和 React 区别的一些笔记
- Vue 和微信小程序的区别、比较
- vue router 如何使用params query传参,以及有什么区别
- vue——created与activated的区别