通过 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' } }) }, }
