61 lines
2.6 KiB
Markdown
61 lines
2.6 KiB
Markdown
# TODO: Fix URL-based Page Navigation (useNavigate URL Format Issue)
|
|
|
|
## Problem Summary
|
|
Pages return "page not found" when accessed via URL. The issue is a mismatch between how `useNavigate.js` generates URLs and how `VueRouteMap.php` parses them back to component names.
|
|
|
|
### Root Cause
|
|
- **Frontend** (`useNavigate.js`): Converts `CooperativeList` → `/cooperativelist` (no separators)
|
|
- **Backend** (`VueRouteMap.php`): Expects hyphenated format like `/cooperative-list` to properly convert back to `CooperativeList`
|
|
- **Result**: Component name mismatch → page not found
|
|
|
|
---
|
|
|
|
## Fix Steps
|
|
|
|
### Step 1: Fix Frontend URL Generation
|
|
**File**: `resources/js/composables/Core/useNavigate.js`
|
|
|
|
- [ ] Modify the URL generation logic to convert camelCase/PascalCase page names to kebab-case
|
|
- [ ] Change: `page.replace(/\./g, '/').toLowerCase()`
|
|
- [ ] To: Convert `CooperativeList` → `cooperative-list` (hyphenated kebab-case)
|
|
- [ ] Ensure all page navigations generate proper kebab-case URLs
|
|
|
|
### Step 2: Verify Backend Route Parsing
|
|
**File**: `app/Http/Controllers/Support/VueRouteMap.php`
|
|
|
|
- [ ] Verify `toCamelCase()` method properly converts kebab-case back to PascalCase
|
|
- [ ] Confirm: `cooperative-list` → `CooperativeList`
|
|
- [ ] Test with multi-word component names
|
|
|
|
### Step 3: Test URL Patterns
|
|
- [ ] Test direct URL access: `/cooperative-list` → loads `CooperativeList` component
|
|
- [ ] Test direct URL access: `/buy-view-product-market` → loads `BuyViewProductMarket` component
|
|
- [ ] Test URLs with hash parameters: `/edit-user--hHASHKEY`
|
|
- [ ] Test URLs with payload parameters: `/some-page--e:ENCODED_PAYLOAD`
|
|
|
|
### Step 4: Verify Browser Back/Forward Navigation
|
|
- [ ] Test popstate event handling with new URL format
|
|
- [ ] Ensure browser history works correctly with kebab-case URLs
|
|
|
|
### Step 5: Check Existing Routes
|
|
- [ ] Verify all routes in `VueRouteMap::$routes` array work with new URL format
|
|
- [ ] Ensure no broken links or navigation issues
|
|
|
|
---
|
|
|
|
## Expected Outcome
|
|
- All pages accessible via direct URL
|
|
- Browser refresh maintains current page
|
|
- Browser back/forward navigation works correctly
|
|
- URLs are clean and SEO-friendly (kebab-case)
|
|
|
|
## Files to Modify
|
|
1. `resources/js/composables/Core/useNavigate.js` - Fix URL generation
|
|
2. Potentially `resources/js/composables/useUrlEncoder.js` - If hash/payload encoding needs adjustment
|
|
|
|
## Testing Checklist
|
|
- [ ] Navigate to a page, copy URL, open in new tab → page loads correctly
|
|
- [ ] Refresh page while on a route → page stays on same route
|
|
- [ ] Browser back button works correctly
|
|
- [ ] URLs with hashkey parameters work
|
|
- [ ] URLs with payload parameters work |