I am currently working on a VueJS 3 application using Quasar, and I am facing difficulties with programmatically utilizing the Router.
The issue can be summarized as follows:
1. The Challenge
When attempting to navigate the User to a different route, only the URL in the browser updates, but the corresponding Component does not render automatically. A manual webpage refresh is required to properly render the component.
2. Code
I have provided a complete example on GitHub: https://github.com/itinance/quasar-router-bug
The router is configured in history-mode, although the issue persists even in hash-mode.
Below are my defined routes:
import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
},
{
path: '/test',
name: 'test',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/TestPage.vue') }],
},
// Ensure this remains the last one,
// though it can be omitted
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue'),
},
];
export default routes;
This is my Index-Component, containing a button that should programmatically redirect the user to another page:
<template>
<q-page class="row items-center justify-evenly">
<div class="q-pa-md example-row-equal-width">
<div class="row">
<div>INDEX PAGE</div>
</div>
<div class="row">
<div>
To navigate to the test page, you must manually reload the page after clicking the button.
Otherwise, only a blank page will appear.
<q-btn align="left" class="btn-fixed-width" color="primary" label="Go to test page" @click="doRedirect"/>
</div>
</div>
</div>
</q-page>
</template>
<script lang="ts">
import {Todo, Meta} from 'components/models';
import ExampleComponent from 'components/ExampleComponent.vue';
import {defineComponent, ref} from 'vue';
import {dom} from 'quasar';
import {useRouter} from 'vue-router';
export default defineComponent({
name: 'IndexPage',
computed: {
dom() {
return dom
}
},
components: {},
setup() {
const router = useRouter();
const doRedirect = () => {
console.log('doRedirect');
router.push({name: 'test'});
}
return {doRedirect};
}
});
</script>
And here is the test-component, where I aim to redirect the user:
<template>
<q-page class="row items-center justify-evenly">
<div class="q-pa-md example-row-equal-width">
<div>
TEST PAGE
This content will display only upon manual page reload
</div>
</div>
</q-page>
</template>
<script lang="ts">
import { Todo, Meta } from 'components/models';
import ExampleComponent from 'components/ExampleComponent.vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'TestPage',
setup () {
return { };
}
});
</script>
- Unexpected Behavior
3.1 This screenshot shows the index page with the button for navigating to another page:
https://i.sstatic.net/Z4mBw.png
3.2 Upon clicking the button, the URL changes but the test-component fails to render:
https://i.sstatic.net/DkcXb.png
3.3 However, upon manually refreshing the webpage (or visiting the new URL directly), the test component displays correctly:
https://i.sstatic.net/XKzLu.png
#4. Inquiry
What could be causing this issue? How can I programmatically navigate the user to the test-page, ensuring both the URL update and automatic rendering of the component?
To replicate the problem described above, please refer to the sample project shared here: https://github.com/itinance/quasar-router-bug