路由跳转传参vue3 setup-不显示在url上

使用路由状态

  import { useRouter } from 'vue-router';  

const router = useRouter();




// 点击去详情页
  const goDetail = (item) => {
    // console.log(item);
    router.push({
      path: '/FillDuty',
      state: { data: JSON.stringify(item) },
    });
  };



// console.log('打印传递过来的', JSON.parse(history.state.data));

使用 localStorage 或 sessionStorage

// 存储参数到 localStorage 的示例代码：
const handlestep4 = (record) => {
  localStorage.setItem('projectParams', JSON.stringify({
    id: record.id,
    projectPhase: record.projectPhase,
    projectId: record.projectId,
  }));
  
  // 跳转到目标页面
  router.push('/projectinitiation/created');
};

// 在目标页面组件中获取参数并清理 localStorage：
mounted() {
  // 从 localStorage 中获取参数
  const projectParams = JSON.parse(localStorage.getItem('projectParams'));
  console.log(projectParams); // 在控制台中输出参数，以便确认是否获取到了正确的值

  // 在这里可以将参数保存到组件的 data 中，或者直接使用
  // 例如：this.id = projectParams.id;

  // 清理 localStorage 中的数据
  localStorage.removeItem('projectParams');
},


②

// 存储参数到 sessionStorage 的示例代码：
const handlestep4 = (record) => {
  sessionStorage.setItem('projectParams', JSON.stringify({
    id: record.id,
    projectPhase: record.projectPhase,
    projectId: record.projectId,
  }));
  
  // 跳转到目标页面
  router.push('/projectinitiation/created');
};

// 在目标页面组件中获取参数并清理 sessionStorage：
mounted() {
  // 从 sessionStorage 中获取参数
  const projectParams = JSON.parse(sessionStorage.getItem('projectParams'));
  console.log(projectParams); // 在控制台中输出参数，以便确认是否获取到了正确的值

  // 在这里可以将参数保存到组件的 data 中，或者直接使用
  // 例如：this.id = projectParams.id;

  // 清理 sessionStorage 中的数据
  sessionStorage.removeItem('projectParams');
},