I'm facing an issue with switching paths in Vue using the Quasar framework. The problem is that when I switch paths, the components don't load into the page until I click refresh. Is there a way to write code that will automatically refresh the page so the components load in?
<template>
<div>
<q-btn
size="40px"
round
color="teal"
label="F"
to="/"
/>
</div>
</q-page>
</template>
When clicking the button, my expectation is for it to go to the / page and load the maps and coordinates components. However, this doesn't happen as expected.
<template>
<coordinates />
<maps />
</template>
<script>
export default {
components: {
'coordinates' : require('components/coordinates.vue').default,
'maps' : require('components/maps.vue').default
},
ROUTER CONFIGURATION:
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '/', component: () => import('pages/PageUsers.vue') },
{ path: '/auth', component: () => import('pages/PageAuth.vue') },
{ path: '/buttons', component: () => import('pages/PageButtons.vue') }
]
}
]
Any help or suggestions would be greatly appreciated!