route issue

[ihola777]

dynamically import components in routes file and the page can't stay at current path while refresh on the browser. it always fallback to previous page each time until the last history hit.
something like
click link: home -> favorite -> setting
refresh the page it will fallback automatically: setting > favorite > home
spent hours for troubleshooting and nothing.
never happened in my other VUE projects, i know i am new on Quasar but this is so harmful :(

### router/index.ts

import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import routes from './routes'
const routerHandler = process.env.SERVER ? createMemoryHistory : process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory

const router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: routerHandler(process.env.VUE_ROUTER_BASE)
})

export default router

### router/routes.ts

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: () => import('views/layouts/DefaultLayout.vue'),
        children: [
            {
                path: '',
                name: 'home',
                component: () => import('views/pages/DefaultPage.vue')
            },
            {
                path: 'search',
                name: 'search',
                component: () => import('views/pages/SearchResultPage.vue')
            },
            {
                path: 'auth',
                name: 'auth',
                component: () => import('views/pages/AuthPage.vue')
            },
            {
                path: 'account',
                name: 'account',
                component: () => import('views/pages/AccountPage.vue'),
                meta: {
                    position: 'dock'
                    // requireAuth: true
                }
            },
            {
                path: 'setting',
                name: 'setting',
                component: () => import('views/pages/SettingPage.vue'),
                meta: {
                    position: 'dock'
                    // requireAuth: true
                }
            },
            {
                path: 'favorite',
                name: 'favorite',
                component: () => import('views/pages/FavoritePage.vue'),
                meta: {
                    position: 'dock'
                    // requireAuth: true
                }
            },
            {
                path: 'notification',
                name: 'notifcation',
                component: () => import('views/pages/NotificationPage.vue'),
                meta: {
                    position: 'dock'
                    // requireAuth: true
                }
            }
        ]
    },
    // Always leave this as last one,
    // but you can also remove it
    {
        path: '/:catchAll(.*)*',
        name: 'error',
        component: () => import('views/pages/NotFound.vue')
    }
]

export default routes

[FadhiliNjagi]

First of all, language!!

Secondly, Quasar does not in any way get involved in routing. That's entirely vue-router. It might help if you provide a minimal codepen or stackblitz of your code so we can help you troubleshoot.

[ihola777]

apologize for my emotional language, i know it's nothing about the framework, just a little tired and down.

[FadhiliNjagi]

Hi. It's understandable. Did you solve your issue?