运用photoshop设计网站首页北京vi设计公司怎么样

目录

一、问题

二、原因及解决方法

三、总结

---

一、问题

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取值，好歹不会出现在 路径中因为解析错误，导致的取值错误