How to make router update URL in browser address bar?

[iliubinskii]

In Vue 2 / Vuetify URL in adress bar updated without any additional configuration.

However, after switching to Vue 3 / Quasar this does not happen neither in dev server nor when I build spa application.

[MilosPaunovic]

What does your routes.js file look like?

[iliubinskii]

import type { RouteComponent, RouteRecordRaw } from "vue-router";

export const routes: readonly RouteRecordRaw[] = [
  {
    children: [
      {
        component: async (): Promise<RouteComponent> =>
          import("./pages/Index.vue"),
        path: ""
      }
    ],
    component: async (): Promise<RouteComponent> => import("./MainLayout.vue"),
    path: "/"
  },
  {
    component: async (): Promise<RouteComponent> =>
      import("./pages/Error404.vue"),
    path: "/:catchAll(.*)"
  }
];

[MilosPaunovic]

Well, you only have the base route / declared, so there's nothing to be changed, is there?

[iliubinskii]

I have catch all URL.

In the index page I have:

<q-page class="items-center justify-evenly row">
    <router-link to="/zzz">404</router-link>
  </q-page>

This link shows 404 page and I expect that it should change URL in browser address bar to https://localhost:XXXX/zzz.

This is actually router.ts that I got after quasar installation. I only fixed ESLint warnings.

[MilosPaunovic]

This is the routes.ts file you get with new project install:
https://github.com/quasarframework/quasar-starter-kit/blob/master/template/src/router/routes.ts

Works as expected for me. Seems like your fixing of ESLint warnings broke something.

[iliubinskii]

It turned out that I had MemoryHistory instead of createWebHistory.