目录

一、问题

二、原因及解决方法

三、总结

---

一、问题

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