https://github.com/itinance/quasar-vue-router-issue
This example shows a specific issue with vue-router
https://github.com/itinance/quasar-vue-router-issue
Last synced: about 1 year ago
JSON representation
This example shows a specific issue with vue-router
- Host: GitHub
- URL: https://github.com/itinance/quasar-vue-router-issue
- Owner: itinance
- Created: 2024-03-17T20:37:34.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-17T20:42:38.000Z (about 2 years ago)
- Last Synced: 2025-02-09T06:16:09.445Z (over 1 year ago)
- Language: JavaScript
- Size: 166 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quasar App (quasar-project)
A Quasar Project
## Install the dependencies
```bash
yarn
# or
npm install
```
### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
quasar dev
```
# Explaining the issue with router:
The IndexPage is encapsulated into the LinkCatcherComponent.
This component listens on the router via "afterEach":
import { useRouter } from 'vue-router';
const router = useRouter();
router.afterEach((to, from) => {
console.log('Router to', to);
console.log('- from', from);
While navigating through the Links in the NavComponent, everything works as expected:
we move from Article 1 to Article 2 to Article 3 and back and on every transition, we
see the console logs from the LinkCatcherComponent.
However, as soon as we press the Button "go to article with push", the router logs are happening twice.
Because `router.afterEach` will get executed twice.
const gotoArticle = () => {
router.push({ name: 'article', params: { id: 'goto-test' } });
After pressing a third time on the button, the logs from the router-event will happen 3x times with every
single transition from one article to another. Number counting with every next click on the button using `router.push`.