路由router.push传参实现数据接收_router.push 带参数

实现一个系统的新增编辑按钮，如果是通过ruoter.push实现跳转到其它组件的功能，那么在新增和编辑的时候会传递数据，到下一个页面会进行接收数据，在获取该数据渲染即可

1.效果图

新增：

编辑：

可见当点击新增按钮时传递的type值为add，点击编辑按钮时传递的type值为edit ，因此点击编辑会通过router.push传参接收数据并且渲染数据

2.实现代码

新增按钮组件页面

//注册
const goToRegister = () => {
  router.push({name:'register', params: { type: 'add' } })
}
//编辑
const toRegister = async(record) => {
  const Data = await getSourceApiDetail(record)
 
  const allData = {...Data.data.data,id:record.id}
  console.log(allData,'>>>>00000<<<<');
  const {
    id,
    apiName,
    apiDirectoryId,
    apiSource,
    apiAgrement,
    apiPort,
    apiPath,
    apiRequest,
    apiTimeout,
    apiDescription,
    apiInputInfoDTOList,
    apiRequestBodyDTOList,
    apiResponseInfoDTOList
  } = allData
  console.log(allData.apiInputInfoDTOList, '5550000000555')
  router.push({ 
    name: 'register' ,
    params: {
      type: 'edit',
      id,
      apiName,
      apiDirectoryId,
      apiSource,
      apiAgrement,
      apiPort,
      apiPath,
      apiRequest,
      apiTimeout,
      apiDescription,
      apiInputInfoDTOList: JSON.stringify(apiInputInfoDTOList),
      apiRequestBodyDTOList: JSON.stringify(apiRequestBodyDTOList),
      apiResponseInfoDTOList: JSON.stringify(apiResponseInfoDTOList),
    }
  })
}

跳转页面

const { type,id,
    apiName ='',
    apiDirectoryId =[],
    apiSource ='',
    apiAgrement ='',
    apiPort ='',
    apiPath ='',
    apiRequest ='',
    apiTimeout ='',
    apiDescription ='',
    apiInputInfoDTOList = '',
    apiRequestBodyDTOList = '',
    apiResponseInfoDTOList = ''
  } = route.params
    console.log(route.params,'>>....>>>');
// 表单验证
const formState = ref({
  apiName: '',
  apiDirectoryId: [],
  apiSource: '',
  apiAgrement: '',
  apiPort: '',
  apiPath: '',
  apiRequest: '',
  apiTimeout: '',
  apiDescription: ''
})
onMounted(() => {
  // 从路由状态中获取数据
  const type = route.params.type;
  
  if (type === 'goback') {
    formState.value = Object.assign({}, route.params);
    
  } else if(type === 'edit'){
    formState.value = Object.assign({}, route.params);
 
  }
 
});

注意：参数以及绑定的数据源等信息根据实际修改！！！

在我的代码中我点击新增编辑之后到下一个页面之后还有跳转到下一个页面，也是通过该方法传递数据实现接收，第二个页面我通过onMounted函数来接收，然后我再根据我传递的type类型来实现具体的新增修改逻辑

这是最后一个页面的接收数据，仅参考

onMounted(() => {
  if (type === 'add') {
    formData.value = route.params
    console.log(route.params,'......');
    
  } else if(type === 'edit'){
    dataSourceOne.value = JSON.parse(route.params.apiInputInfoDTOList)
  dataSourceNext.value = JSON.parse(route.params.apiRequestBodyDTOList)
  dataSourceThird.value = JSON.parse(route.params.apiResponseInfoDTOList)
  testDetails.value = JSON.parse(route.params.apiRequestBodyDTOList)
  testDetailsNext.value = JSON.parse(route.params.apiInputInfoDTOList)
  }
  
})