序号	销售类型	订单编号	产品编号	产品名称	订单数量	GTM要求交期	订单评审出货日期	电子料齐套	组装料齐套	SMT累计出货	SMT欠订单数	SMT工厂	组装累计出货	组装欠订单数	组装工厂	结单状况	备注	操作
加载中...

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>总订单完成状况</title> <style> :root{ --bg:#f5faff; --panel:#fff; --border:#cce7ff; --primary:#3ca9ff; --primary-dark:#0077e6; --primary-light:#e6f4ff; --text:#003366; --text-light:#0077e6; --shadow:rgba(60,169,255,.12); } body{margin:0;background:var(--bg);font-family:"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif} .status-container{max-width:98%;margin:22px auto;background:var(--panel);border:1px solid var(--border);padding:22px 18px 30px 18px;border-radius:12px;box-shadow:0 6px 30px var(--shadow);position:relative} .status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;background:var(--bg)} .status-header h3{color:var(--text-light);letter-spacing:2px} .status-header .btns{display:flex;gap:12px} .btn{padding:7px 18px;border:none;border-radius:4px;font-size:15px;cursor:pointer;background:var(--primary);color:#fff;transition:background .2s} .btn:hover{background:var(--primary-dark)} .btn.modify{background:var(--primary-light);color:var(--text)} .btn.modify:hover{background:var(--primary-dark);color:#fff} .search-box{display:flex;align-items:center;gap:8px} .search-box input{height:32px;border:1px solid var(--primary);border-radius:4px;padding:0 10px;font-size:14px;background:#fff;color:var(--text)} table{width:100%;border-collapse:collapse;font-size:14px;color:var(--text)} thead{background-color:var(--primary-light);color:var(--text)} th,td{border:1px solid var(--border);padding:9px 7px;text-align:center} th{background:var(--primary-light);color:var(--text)} tr:nth-child(even){background:var(--bg)} .tag{border-radius:10px;padding:2px 10px;font-size:13px;display:inline-block} .tag-success{background:#d0ffd0;color:#006100} .tag-danger{background:#ffecec;color:#c00000;cursor:pointer} td:last-child{white-space:nowrap;min-width:120px} /* 弹窗 / .modal-mask{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,119,230,.2);z-index:999;display:none} .modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;min-width:360px;border-radius:8px;box-shadow:0 8px 32px rgba(60,169,255,.15);padding:22px;z-index:1000;display:none} .modal-title{font-weight:bold;font-size:1.18rem;color:var(--primary-dark);margin-bottom:19px} .modal-form-row{margin-bottom:13px;display:flex;align-items:center} .modal-form-row label{width:86px;color:var(--text-light);font-size:14px} .modal-form-row input,.modal-form-row select{flex:1;height:28px;padding:0 7px;border:1px solid var(--primary);border-radius:4px;background:var(--bg);color:var(--text)} .modal-btns{text-align:right;margin-top:18px} .modal-btns .btn{margin-left:12px;background:var(--primary)} / 分页 / .pager-box{display:flex;align-items:center;gap:8px;position:absolute;right:22px;bottom:-80px;background:var(--primary-light);padding:6px 10px;border-radius:6px;box-shadow:0 2px 8px var(--shadow);font-size:14px;color:var(--text-light)} .pager-label input{width:46px;height:24px;text-align:center;border:1px solid var(--primary);border-radius:4px;margin:0 4px;background:#fff;color:var(--text-light)} </style> </head> <body> <div class="status-container"> <div class="status-header"> <h3>总订单完成状况</h3> <div class="btns"> <div class="search-box"> <input type="text" id="searchInput" placeholder="订单编号、产品名称...关键词查询"> <button class="btn" onclick="searchOrders()">查询</button> </div> <button class="btn" onclick="openAddModal()">增加</button> </div> </div> <table> <thead> <tr> <th>序号</th><th>销售类型</th><th>订单编号</th><th>产品编号</th><th>产品名称</th> <th>订单数量</th><th>GTM要求交期</th><th>订单评审出货日期</th> <th>电子料齐套</th><th>组装料齐套</th> <th>SMT累计出货</th><th>SMT欠订单数</th><th>SMT工厂</th> <th>组装累计出货</th><th>组装欠订单数</th><th>组装工厂</th> <th>结单状况</th><th>备注</th><th>操作</th> </tr> </thead> <tbody id="orderTableBody"><tr><td colspan="19">加载中...</td></tbody> </table> <div id="pagerBox" class="pager-box"> <button class="btn" id="btnPrev" onclick="prevPage()">上一页</button> <label class="pager-label"> 第<input type="number" id="pageInput" min="1" max="1" value="1" onkeydown="if(event.key==='Enter') jumpToPage()">页 / 共<span id="totalPages">1</span>页 </label> <button class="btn" id="btnNext" onclick="nextPage()">下一页</button> <button class="btn modify" onclick="jumpToPage()">跳转</button> </div> </div>  <div class="modal-mask" id="modalMask"></div> <div class="modal" id="modalBox"> <div class="modal-title" id="modalTitle">新增订单</div> <form id="modalForm"> <div class="modal-form-row"><label>销售类型</label><input name="saleType" required></div> <div class="modal-form-row"><label>订单编号</label><input name="orderNo" required></div> <div class="modal-form-row"><label>产品编号</label><input name="productNo" required></div> <div class="modal-form-row"><label>产品名称</label><input name="productName" required></div> <div class="modal-form-row"><label>订单数量</label><input type="number" name="orderQuantity" required></div> <div class="modal-form-row"><label>GTM交期</label><input type="date" name="gtmDueDate"></div> <div class="modal-form-row"><label>评审出货日期</label><input type="date" name="reviewShipDate"></div> <div class="modal-form-row"><label>电子料齐套</label> <select name="materialElectronic"><option value="1">齐套</option><option value="0">未齐套</option></select></div> <div class="modal-form-row"><label>组装料齐套</label> <select name="materialAssembly"><option value="1">齐套</option><option value="0">未齐套</option></select></div> <div class="modal-form-row"><label>SMT累计出货</label><input type="number" name="smtShippedQty"></div> <div class="modal-form-row"><label>SMT欠订单数</label><input type="number" name="smtOwedQty"></div> <div class="modal-form-row"><label>SMT工厂</label><input name="smtFactory"></div> <div class="modal-form-row"><label>组装累计出货</label><input type="number" name="assemblyShippedQty"></div> <div class="modal-form-row"><label>组装欠订单数</label><input type="number" name="assemblyOwedQty"></div> <div class="modal-form-row"><label>组装工厂</label><input name="assemblyFactory"></div> <div class="modal-form-row"><label>接单状况</label><input name="receiveStatus"></div> <div class="modal-form-row"><label>备注</label><input name="remark"></div> <div class="modal-btns"> <button type="button" class="btn" onclick="closeModal()">取消</button> <button type="submit" class="btn modify" id="modalSubmitBtn">保存</button> </div> </form> </div>  <div class="modal-mask" id="bomModalMask"></div> <div class="modal" id="bomModalBox"> <div class="modal-title" id="bomModalTitle">BOM 齐套详情</div> <form id="bomModalForm"> <input type="hidden" id="bomType"> <input type="hidden" id="bomOrderNo"> <div class="modal-form-row"> <label>BOM 版本</label> <select id="bomVersionSelect" required></select> </div>  <div class="modal-form-row"> <label>物料编码</label> <input type="text" id="materialCode" required placeholder="请输入物料编码"> </div>  <div class="modal-form-row"> <label>物料名称</label> <input type="text" id="materialName" required placeholder="如：贴片电阻"> </div>  <div class="modal-form-row"> <label>规格</label> <input type="text" id="specification" placeholder="如：0603 1KΩ ±1%"> </div>  <div class="modal-form-row"> <label>技术参数</label> <input type="text" id="technicalParam" placeholder="如：阻值范围/温度系数"> </div>  <div class="modal-form-row"> <label>参数值</label> <input type="text" id="paramValue" placeholder="如：1KΩ/±100ppm/℃"> </div>  <div class="modal-form-row"> <label>用量</label> <input type="number" id="quantity" required min="1" placeholder="单个产品所需数量"> </div>  <div class="modal-form-row"> <label>制造商</label> <input type="number" id="manufacturerSelect" required min="1" placeholder="单个产品所需数量"> </div>  <div class="modal-form-row"> <label>制造商料号</label> <input type="text" id="mpn" required placeholder="如：RC0603FR-071KL"> </div> <div class="modal-btns"> <button type="button" class="btn" onclick="closeBomModal()">取消</button> <button type="submit" class="btn modify">保存</button> </div> </form> </div>  <div class="modal-mask" id="eBomModalMask"></div> <div class="modal" id="eBomModalBox"> <div class="modal-title">电子料齐套详情</div> <form id="eBomModalForm"> <div class="modal-form-row"><label>订单编号</label><input id="eBomOrderNo" readonly></div> <div class="modal-form-row"><label>BOM版本</label><select id="eBomVersionSelect" required></select></div> <div class="modal-form-row"><label>订单数量</label><input type="number" id="eBomOrderQty" min="1" required></div> <div class="modal-btns"> <button type="button" class="btn" onclick="closeEBomModal()">取消</button> <button type="submit" class="btn modify">保存</button> </div> </form> </div> <script> let editingId = null, allOrders = [], currentPage = 1, totalPages = 1; const eBomQtyCache = {}; // 已录入电子料齐套数量缓存 async function request(url, method='GET', body=null){ const res = await fetch(url, { method, headers: body ? {'Content-Type':'application/json'} : {}, body: body ? JSON.stringify(body) : undefined }); return res.json(); } async function loadOrders(keyword, page){ const tbody=document.getElementById('orderTableBody'); tbody.innerHTML='<tr><td colspan="19">加载中...</td></tr>'; try{ let url=`/api/orders?page=${page}&size=10`; if(keyword) url+=`&keyword=${encodeURIComponent(keyword)}`; const data=await request(url); allOrders=data.records; renderOrders(data.records); currentPage=data.current; totalPages=data.pages; updatePager(); }catch(e){ tbody.innerHTML='<tr><td colspan="19">加载失败</td></tr>'; } } function renderOrders(data){ const tbody=document.getElementById('orderTableBody'); if(!data.length){ tbody.innerHTML='<tr><td colspan="19">暂无数据</td></tr>'; return; } tbody.innerHTML=data.map(r=>` <tr> <td>${r.id}</td><td>${r.saleType||'-'}</td><td>${r.orderNo||'-'}</td><td>${r.productNo||'-'}</td><td>${r.productName||'-'}</td> <td>${r.orderQuantity??'-'}</td><td>${r.gtmDueDate||'-'}</td><td>${r.reviewShipDate||'-'}</td>  <td> <span class="tag ${r.materialElectronic?'tag-success':'tag-danger'}" style="cursor:${r.materialElectronic?'default':'pointer'}" onclick="${!r.materialElectronic?`openEBomDetailModal('${r.orderNo}',${r.orderQuantity||0})`:''}"> ${r.materialElectronic?'齐套':'未齐套'} </span> <button class="btn modify" style="font-size:12px;padding:2px 8px" onclick="openEBomDetailTable('${r.orderNo}')">详情</button> </td>  <td> <span class="tag ${r.materialAssembly?'tag-success':'tag-danger'}"> ${r.materialAssembly?'齐套':'未齐套'} </span> <button class="btn modify" style="font-size:12px;padding:2px 8px" onclick="openBomDetail('assembly','${r.orderNo}',${r.orderQuantity||0})"> 详情 </button> </td> <td>${r.smtShippedQty??'-'}</td><td>${r.smtOwedQty??'-'}</td><td>${r.smtFactory||'-'}</td> <td>${r.assemblyShippedQty??'-'}</td><td>${r.assemblyOwedQty??'-'}</td><td>${r.assemblyFactory||'-'}</td> <td>${r.receiveStatus||'-'}</td><td>${r.remark||'-'}</td> <td> <button class="btn modify" onclick="openEditModal(${r.id})">修改</button> <button class="btn" style="margin-left:6px;background:#f56c6c" onclick="deleteOrder(${r.id})">删除</button> </td> </tr>`).join(''); } function searchOrders(){loadOrders(document.getElementById('searchInput').value.trim(),1);} function updatePager(){ const p=document.getElementById('pageInput'); p.max=totalPages; p.value=currentPage; document.getElementById('totalPages').textContent=totalPages; document.getElementById('btnPrev').disabled=currentPage<=1; document.getElementById('btnNext').disabled=currentPage>=totalPages; } function jumpToPage(){ const v=parseInt(document.getElementById('pageInput').value,10); if(v>=1&&v<=totalPages) loadOrders(document.getElementById('searchInput').value.trim(),v); } function prevPage(){if(currentPage>1) loadOrders(document.getElementById('searchInput').value.trim(),currentPage-1);} function nextPage(){if(currentPage<totalPages) loadOrders(document.getElementById('searchInput').value.trim(),currentPage+1);} / 订单弹窗 / function openAddModal(){editingId=null;resetModal('新增订单');} function openEditModal(id){ editingId=id; const r=allOrders.find(r=>r.id===id); resetModal('修改订单',r); } function resetModal(title,data={}){ document.getElementById('modalTitle').textContent=title; const f=document.getElementById('modalForm'); f.reset(); for(const k in data) if(f[k]!==undefined) f[k].value=data[k]; document.getElementById('modalMask').style.display='block'; document.getElementById('modalBox').style.display='block'; } function closeModal(){ document.getElementById('modalMask').style.display='none'; document.getElementById('modalBox').style.display='none'; } document.getElementById('modalMask').onclick=closeModal; document.getElementById('modalForm').onsubmit=async e=>{ e.preventDefault(); const fd=new FormData(e.target); const data=Object.fromEntries(fd); data.materialElectronic=data.materialElectronic==='1'; data.materialAssembly=data.materialAssembly==='1'; ['orderQuantity','smtShippedQty','smtOwedQty','assemblyShippedQty','assemblyOwedQty'] .forEach(k=>{if(data[k])data[k]=Number(data[k]);}); try{ const url=editingId?`/api/orders/${editingId}`:'/api/orders'; const meth=editingId?'PUT':'POST'; await request(url,meth,data); closeModal(); loadOrders('',currentPage); }catch{alert('保存失败');} }; async function deleteOrder(id){ if(!confirm(`确定删除订单 ${id} 吗？`)) return; try{ await request(`/api/orders/${id}`,'DELETE'); loadOrders(document.getElementById('searchInput').value.trim(),currentPage); }catch{alert('删除失败');} } / ========= 通用 BOM 弹窗 ========= / function openBomDetail(type, orderNo, orderQty){ document.getElementById('bomType').value = type; // electronic / assembly document.getElementById('bomOrderNo').value = orderNo; document.getElementById('bomModalTitle').textContent = (type === 'electronic' ? '电子料' : '组装料') + '齐套详情'; / 拉取或初始化数据 / fetchBomDetail(type, orderNo).then(data=>{ fillBomModal(data, orderQty); document.getElementById('bomModalMask').style.display='block'; document.getElementById('bomModalBox').style.display='block'; }); } async function fetchBomDetail(type, orderNo){ // 调用后端接口，返回 {bomVersion, orderQty, needQty, oweQty} const res = await request(`/api/bom_detail/${type}/${orderNo}`); return res || {}; } function fillBomModal(data, orderQty){ / 版本下拉 / const sel=document.getElementById('bomVersionSelect'); sel.innerHTML=''; const versions = JSON.parse(localStorage.getItem('eBomVersions')||'[]'); versions.forEach(v=>{ const opt=document.createElement('option'); opt.value=opt.textContent=v; if(v===data.bomVersion) opt.selected=true; sel.appendChild(opt); }); document.getElementById('bomOrderQty').value = data.orderQty ?? orderQty; document.getElementById('bomNeedQty').value = data.needQty ?? 0; document.getElementById('bomOweQty').value = data.oweQty ?? 0; } function closeBomModal(){ document.getElementById('bomModalMask').style.display='none'; document.getElementById('bomModalBox').style.display='none'; } document.getElementById('bomModalMask').onclick = closeBomModal; / 保存 / document.getElementById('bomModalForm').addEventListener('submit', async e=>{ e.preventDefault(); const type = document.getElementById('bomType').value; const orderNo= document.getElementById('bomOrderNo').value; const payload = { bomVersion : document.getElementById('bomVersionSelect').value, orderQty : Number(document.getElementById('bomOrderQty').value), needQty : Number(document.getElementById('bomNeedQty').value), oweQty : Number(document.getElementById('bomOweQty').value) }; try{ await request(`/api/bom_detail/${type}/${orderNo}`, 'POST', payload); alert('保存成功'); closeBomModal(); }catch{ alert('保存失败'); } }); / 电子料齐套弹窗 */ function openEBomDetailModal(orderNo,orderQty){ document.getElementById('eBomOrderNo').value=orderNo; const cached=eBomQtyCache[orderNo]||0; document.getElementById('eBomOrderQty').value=cached; document.getElementById('eBomOrderQty').min=cached; const sel=document.getElementById('eBomVersionSelect'); sel.innerHTML=''; const versions=JSON.parse(localStorage.getItem('eBomVersions')||'[]'); if(!versions.length){alert('请先打开“电子料 BOM 明细”页面以同步 BOM 版本数据');return;} versions.forEach(v=>{ const opt=document.createElement('option'); opt.value=opt.textContent=v; sel.appendChild(opt); }); document.getElementById('eBomModalMask').style.display='block'; document.getElementById('eBomModalBox').style.display='block'; } function closeEBomModal(){ document.getElementById('eBomModalMask').style.display='none'; document.getElementById('eBomModalBox').style.display='none'; } document.getElementById('eBomModalMask').onclick=closeEBomModal; document.getElementById('eBomModalForm').addEventListener('submit',async e=>{ e.preventDefault(); const orderNo=document.getElementById('eBomOrderNo').value.trim(); const bomVersion=document.getElementById('eBomVersionSelect').value; const qty=Number(document.getElementById('eBomOrderQty').value); const cached=eBomQtyCache[orderNo]||0; if(qty<cached){alert('订单数量只能增加，不能减少！');return;} try{ await request('/api/electronic_bom_detail','POST',{orderNo,bomVersion,orderQty:qty}); eBomQtyCache[orderNo]=qty; alert('保存成功'); closeEBomModal(); }catch{alert('保存失败');} }); loadOrders('',1); </script> </body> </html>能不能给我当点击未齐套时页面跳转的具体流程，当我单击详情时该怎么实现页面跳转

时间: 2025-07-19 07:25:34 浏览: 4

<think>我们正在处理一个前端页面跳转的问题，具体场景是：在点击“电子料未齐套”或“详情”按钮时，跳转到BOM详情页，并传递订单编号和数量这两个参数。假设我们使用的是Vue.js框架（因为这是常见的前端框架之一），那么我们可以通过路由跳转并传递参数。步骤： 1. 首先，确保你的路由已经配置好，有对应的BOM详情页的路由路径，比如路径为`/bom-detail`，并且该路由可以接收参数（如订单编号和数量）。 2. 在按钮的点击事件处理方法中，使用路由跳转，并传递参数。在Vue中，我们可以使用`this.$router.push`方法进行跳转。传递参数有两种常见方式： - 通过路径中的参数（params）传递 - 通过查询参数（query）传递这里我们选择使用query传递，因为这样参数会显示在URL上，便于分享和刷新页面后参数仍然保留（但注意：如果参数敏感则不适合，不过订单编号和数量一般不算敏感）。假设我们的按钮在一个组件中，并且已经注入了`$router`。示例代码：在模板中，给按钮绑定点击事件： ```html <button @click="goToBomDetail(orderId, quantity)">电子料未齐套</button> <button @click="goToBomDetail(orderId, quantity)">详情</button> ``` 在组件的methods中定义goToBomDetail方法： ```javascript methods: { goToBomDetail(orderId, quantity) { this.$router.push({ path: '/bom-detail', // 目标路由路径 query: { orderId: orderId, // 传递订单编号 quantity: quantity // 传递数量 } }); } } ``` 3. 在BOM详情页组件中，我们可以通过`this.$route.query`来获取传递的参数。 ```javascript created() { const orderId = this.$route.query.orderId; const quantity = this.$route.query.quantity; // 使用这些参数进行后续操作，比如根据订单编号和数量请求数据 } ``` 注意：如果使用Vue3和Composition API，可以使用`useRouter`和`useRoute`。使用Composition API的示例：在按钮的事件处理函数中（在setup中）： ```javascript import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); const goToBomDetail = (orderId, quantity) => { router.push({ path: '/bom-detail', query: { orderId, quantity } }); }; return { goToBomDetail }; } } ``` 在BOM详情页组件中获取参数： ```javascript import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); const orderId = route.query.orderId; const quantity = route.query.quantity; // ... } } ``` 4. 如果使用其他框架（如React）或者原生JS，方法会有所不同，但思路类似。在React中，可以使用`react-router-dom`： - 使用`useNavigate`进行跳转（v6版本） - 使用`useLocation`或`useSearchParams`获取参数示例（React）： ```javascript import { useNavigate } from 'react-router-dom'; function Component() { const navigate = useNavigate(); const goToBomDetail = (orderId, quantity) => { navigate(`/bom-detail?orderId=${orderId}&quantity=${quantity}`); }; return ( <button onClick={() => goToBomDetail('123', 10)}>跳转</button> ); } ``` 在BOM详情页组件中获取参数（React）： ```javascript import { useLocation } from 'react-router-dom'; function BomDetailPage() { const location = useLocation(); const searchParams = new URLSearchParams(location.search); const orderId = searchParams.get('orderId'); const quantity = searchParams.get('quantity'); // ... } ``` 5. 如果使用Angular，可以使用`Router`服务进行导航，并使用`ActivatedRoute`获取参数。总结：无论使用哪种框架，核心步骤都是： - 在按钮点击事件中触发路由跳转，并在URL中附加参数（通常使用query参数）。 - 在目标页面中解析URL参数，获取订单编号和数量。注意事项： - 参数传递方式：使用query参数，这样刷新页面后参数不会丢失（而params参数在刷新后可能会丢失，除非配置了动态路由）。 - 参数类型：注意传递的参数会被转换为字符串，所以如果数量是数字类型，在目标页面可能需要转换。 - 错误处理：确保在目标页面处理参数缺失的情况。根据你的具体技术栈选择实现方式。相关问题： 1. 如何在Vue中配置路由？ 2. 在React中如何传递和获取路由参数？ 3. 如何防止页面刷新后路由参数丢失？ 4. 除了使用query参数，还有哪些路由传参方式？ 5. 在Angular中如何实现路由跳转并传递参数？</think>### 实现页面跳转流程详解在点击"电子料未齐套"或"详情"按钮时，实现跳转到BOM详情页并传递订单编号和数量，需要以下完整流程： #### 1. 按钮事件绑定 ```html  <el-button @click="handleMaterialClick(order)">电子料未齐套</el-button> <el-button @click="handleDetailClick(order)">详情</el-button> ``` #### 2. 路由配置（Vue Router示例） ```javascript // router.js { path: '/bom-detail/:orderId', // 动态路由参数 name: 'BomDetail', component: () => import('@/views/BomDetail.vue'), props: true // 启用props接收参数 } ``` #### 3. 事件处理方法 ```javascript // 在Vue组件方法中 methods: { // 处理物料按钮点击 handleMaterialClick(order) { this.navigateToBomDetail(order); }, // 处理详情按钮点击 handleDetailClick(order) { this.navigateToBomDetail(order); }, // 统一跳转方法 navigateToBomDetail(order) { this.$router.push({ name: 'BomDetail', params: { orderId: order.id, // 传递订单编号 }, query: { quantity: order.qty, // 传递数量 type: 'material' // 标识来源类型 } }); } } ``` #### 4. BOM详情页接收参数 ```javascript // BomDetail.vue export default { props: ['orderId'], // 接收路由参数 data() { return { quantity: 0 }; }, created() { // 从query获取数量 this.quantity = this.$route.query.quantity || 0; // 获取订单类型标识 const sourceType = this.$route.query.type; // 根据orderId和quantity请求数据 this.fetchBomData(this.orderId, this.quantity); }, methods: { fetchBomData(orderId, quantity) { // 调用API获取BOM详情数据 api.getBomDetail({ orderId, quantity }) .then(res => { /* 处理数据 */ }) .catch(err => { /* 错误处理 */ }); } } } ``` #### 5. 参数传递示意图 ```mermaid graph LR A[点击按钮] --> B{事件处理} B --> C[组装参数] C --> D[路由跳转] D --> E[BOM详情页] E --> F[接收参数] F --> G[发起数据请求] ``` ### 关键注意事项 1. **参数类型处理**： - 订单编号通常作为路由参数（params）传递，显示在URL中 - 数量使用查询参数（query）传递，格式为`?quantity=100` 2. **安全验证**： ```javascript // 在跳转前验证参数 if (!order.id || order.qty <= 0) { this.$message.error('订单信息不完整'); return; } ``` 3. **多框架适配**： - **React**：使用`useNavigate`和`useParams` - **Angular**：使用`Router.navigate()`和`ActivatedRoute` 4. **浏览器兼容性**： ```javascript // 处理URL长度限制 if (JSON.stringify(params).length > 2000) { // 改用sessionStorage存储大数据 sessionStorage.setItem('bomParams', JSON.stringify(params)); } ``` ### 最佳实践建议 1. 使用路由命名跳转而非硬编码路径 2. 重要参数应进行URL编码： ```javascript encodeURIComponent(order.id) ``` 3. 添加路由导航守卫验证参数有效性 4. 在详情页处理浏览器刷新时的参数持久化 > 路由参数和查询参数的区别在于：路由参数(`params`)是URL路径的一部分（如`/orders/123`），适合标识性数据；查询参数(`query`)是`?`后的键值对，适合筛选条件[^1]。

阅读全文

总订单完成状况

相关推荐

###这是一篇关于母亲节祝福html的源码

去掉的下划线与设置的颜色

-doctype-html-html-lang-en-head-meta-charset-utf-8-title-GitHub-Privacy-Stat:GitHub隐私声明-GitHub Docs <title> <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”> <link rel =“ alternate icon” type =“ imagepng” href =“ a

html <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=UTF-8> <meta name=viewpo

<!DOCTYPE html> <html lang="zh-CN">

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>千仞雪拯救计划</title><style>body{background:#000;c

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标签的语法</title> </head> <body> 在本教程中，你将学习如何使用 HTML 来创建站点 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 </body> </html>上述代码缺少代码请补充

html-title图标(代码)

HeadFirst HTMl

Laravel开发-meta-tags

HTML head 头标签详细介绍

html5.js文件，在head部分引用该文件，使各种浏览器支持html5

Laravel开发-pagetitle

HTML5之lang属性与dir属性的详解

重要知识HTML5head头标签.pdf

圣诞树html网页代码-3.HTML 区块.html

Signup-form-using-html:使用基本HTML的注册页面表单。 此处涵盖了最大的整个“ html表单”主题

cv-html-css:使用 html 和 css 创建简历

html lang utf-8

小程序，引入html,不要title

大家在看

115网盘 v4.0.0.55 官方正式免费版.zip

IndCal.rar

RS232-Monitor-Commands:这是用于专业屏幕，显示器和投影仪的所有已知RS232命令的公共数据库。 随时贡献！

XL USB SDK_激光干涉仪_雷尼绍干涉仪sdk_xl_

Android开发环境配置

最新推荐

微软解决方案面向服务的架构.doc

VC图像编程全面资料及程序汇总

Pokemmo响应速度翻倍：多线程处理的高级技巧

人名列表滚动抽奖

一站式JSF开发环境：即解压即用JAR包

Pokemmo内存优化揭秘：专家教你如何降低50%资源消耗

直接访问子路由是吧

C++函数库查询辞典使用指南与功能介绍

【bat脚本安全最佳实践】：保护你的系统与脚本安全的黄金法则

IIC抽电

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标签的语法</title> </head> <body> 在本教程中，你将学习如何使用 HTML 来创建站点当特殊的样式需要应用到个别元素时，就可以使用内联样式。 </body> </html>上述代码缺少代码请补充

Signup-form-using-html:使用基本HTML的注册页面表单。此处涵盖了最大的整个“ html表单”主题

RS232-Monitor-Commands:这是用于专业屏幕，显示器和投影仪的所有已知RS232命令的公共数据库。随时贡献！