39 lines
1.1 KiB
Markdown
39 lines
1.1 KiB
Markdown
# Vue Router guard/history experiment
|
|
|
|
This small app compares the browser's current URL and history position with
|
|
Vue Router's `currentRoute` while a real `beforeResolve` guard is pending.
|
|
|
|
## Run it
|
|
|
|
From the repository root:
|
|
|
|
```sh
|
|
npm --prefix experiments/router-guard-history run dev
|
|
```
|
|
|
|
Open the URL printed by Vite.
|
|
|
|
## Suggested tests
|
|
|
|
### Forward navigation
|
|
|
|
1. Enable **Pause the next `beforeResolve`**.
|
|
2. Click **Push Alpha**.
|
|
3. While paused, compare **Browser URL** with **router.currentRoute**.
|
|
4. Allow or reject the navigation.
|
|
|
|
For `router.push()`, both values remain on the outgoing route until the guard
|
|
allows confirmation.
|
|
|
|
### Back navigation
|
|
|
|
1. Push **Alpha**, then push **Beta**.
|
|
2. Enable **Pause the next `beforeResolve`**.
|
|
3. Click **Router Back**.
|
|
4. While paused, compare **Browser URL** with **router.currentRoute**.
|
|
5. Reject the navigation and watch the browser restore its previous history
|
|
entry, or repeat the test and allow it.
|
|
|
|
The event timeline separately records the raw browser `popstate`, Vue Router
|
|
guards, the URL, `currentRoute`, and the navigation result.
|