vue-Router中通过路由地址path中的数据转换为props传参,不建议添加多个可选参数
目录
一、问题
二、原因及解决方法
三、总结
一、问题
1.一个页面是通过路哟跳转的,要传递参数。之前使用的是 路径转props.为保持代码一致性,也采用这种方式传参。但是发现第一次是正确的,但是如果点击浏览器左上角的刷新按钮时 参数解析错误。
二、原因及解决方法
1.具体代码
{// :xxx?表示属性可选 type,defaultBusiScopeDesc,submitParams可选path: 'edit-factory-qualification/:id/:type?/:defaultBusiScopeDesc?/:submitParams?',name: 'EditFactoryQualification',component: () =>import('@/views/commodity-management/activities-on-shelf/factory-qualification/edit-qualification/index.vue'),meta: {title: '厂家资质'},props: (route) => {// 测试——查看数据console.log('params',{id: route.params.id,type: route.params.type || '',defaultBusiScopeDesc: route.params.defaultBusiScopeDesc || '',submitParams: route.params.submitParams || {}},route.params)// 使用path中的数据转换为props传参return {id: route.params.id,type: route.params.type || '',defaultBusiScopeDesc: route.params.defaultBusiScopeDesc || '',submitParams: route.params.submitParams || {}}}}
//跳转
const router = useRouter()
function handleEdit(record: FactoryQuaActItem) {router.push({name: 'EditFactoryQualification',params: {id: record.id,defaultBusiScopeDesc: '中药饮片',submitParams: JSON.stringify({ id: record.id, factoryId: record.factoryId })}})
}
2. 具体错误: 刷新后,页面取到的值是错误的,没有把type当成缺省项
3.解决方法
1)需要缺省的数据写到路径的最末尾,多个参数需要缺省,越有可能缺省的放在最后面: 上面的代码中 type缺省时,defaultBusiScopeDesc和submitParams不缺省。可以将type放在路径的最后面,避免解析错误
2)尽量不要在路径中 添加多个缺省参数,再用props解析。可以自己在页面中使用 route.params来解析,以免出现错误
三、总结
1.路径中使用参数,作为props传递时,最有可能缺省的参数要写在最末尾。否则有可能页面刷新,获取的数据是错误的
2.尽量不要在路径中使用多个参数并且多个参数缺省。
3.前人写的代码用的太多了,没法改,所以只能将就用了。改成query取值,好歹不会出现在 路径中因为解析错误,导致的取值错误