diff --git a/src/modules/finance/pages/FinanceFormalSettlementPage.vue b/src/modules/finance/pages/FinanceFormalSettlementPage.vue
index 1a122afb..346c9319 100644
--- a/src/modules/finance/pages/FinanceFormalSettlementPage.vue
+++ b/src/modules/finance/pages/FinanceFormalSettlementPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
 import { ArrowLeft, CreditCard, Download, Eye, HandCoins, Plus, RotateCcw, XCircle } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -39,6 +39,7 @@ type SettlementRow = FinanceReceivableSettlement | FinancePayableSettlement
 
 const props = defineProps<{ kind: 'receivable' | 'payable'; settlementId?: string }>()
 const emit = defineEmits<{ openDetail: [settlementId: string]; back: [] }>()
+const appRouter = getCurrentInstance()?.appContext.config.globalProperties.$router
 const access = useAccessPreviewStore()
 const customers = ref<PlatformTenantResource[]>([])
 const filters = ref<QueryModel>({ customerId: '', supplierName: '', settlementNo: '', status: '' })
@@ -182,7 +183,13 @@ async function load(model: QueryModel = filters.value) {
 
 function openDetail(row: unknown) {
   selectedRow.value = row as SettlementRow
-  emit('openDetail', selectedRow.value.id)
+  const settlementId = selectedRow.value.id
+  if (appRouter) {
+    const listPath = props.kind === 'receivable' ? '/finance/settlement-receivables' : '/finance/settlement-payables'
+    void appRouter.push(`${listPath}/${encodeURIComponent(settlementId)}`)
+    return
+  }
+  emit('openDetail', settlementId)
 }
 
 async function loadDetail(settlementId: string) {
diff --git a/src/modules/finance/pages/FinanceG3G4Operations.test.ts b/src/modules/finance/pages/FinanceG3G4Operations.test.ts
index 9dcaa175..044007ef 100644
--- a/src/modules/finance/pages/FinanceG3G4Operations.test.ts
+++ b/src/modules/finance/pages/FinanceG3G4Operations.test.ts
@@ -205,7 +205,7 @@ describe('finance G3/G4 page operations', () => {
     const wrapper = mount(FinanceSettlementReceivablesView, { global: { plugins: [pinia, router, ElementPlus] } })
     await flushPromises()
 
-    wrapper.findComponent(FinanceFormalSettlementPage).vm.$emit('openDetail', '63')
+    ;(wrapper.findComponent(FinanceFormalSettlementPage).vm as unknown as { openDetail(row: { id: string }): void }).openDetail({ id: '63' })
     await flushPromises()
 
     expect(router.currentRoute.value.fullPath).toBe('/finance/settlement-receivables/63')