I’m working on a Vue.js application using Vue Router and Axios to fetch user data. I have two pages: /dashboard and /dashboard/me. The data for the /dashboard page is successfully loaded and displayed, even after refreshing. However, when I navigate to /dashboard/me and refresh the page, I lose the data from Dashboard components (Dashboard is a wrapper for all children routes), and the request results in a 304 Not Modified status code.

Here’s what I’ve tried:

Vue Router setup: The routes are defined as follows:

const routes: RouteRecordRaw[] = [
    {
        path: '/dashboard, component: Dashboard, name: 'dashboard',
        children: [{ path: 'me', name: 'me', component: AboutMePage }],
    },
];

I initially had the me route defined as path: ‘me’ (relative), but when I change it to path: ‘/me’ (absolute), the page works correctly on refresh, but the issue is that now the route becomes /dashboard and /me instead of /dashboard/me.

Axios request: I’m using Axios to fetch data, and it works fine on the /dashboard route. On the /dashboard/me route, however, when I refresh the page, I get a 304 Not Modified response, which causes the data to be lost.

The request code is as follows:

const { data, isLoading, refetch } = useGetUserQuery(userId, {
    onSuccess: (user) => {
        toast.add({
            severity: 'success',
            summary: `Welcome, ${user.email}`,
            life: 3000,
        });
    },
    onError: (error) => {
        toast.add({
            severity: 'error',
            summary: error?.message[0],
            life: 3000,
        });
    },
});

The refetch function is also used to refresh the data.

Proxy configuration in Vite: I have configured a proxy in my vite.config.ts file to redirect requests to the backend server.

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/v1': {
        target: 'http://localhost:3001/',
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      }
    }
  }
})

Problem:

When I refresh the /dashboard/me page, I get an empty response and the data is lost.
The network response shows 304 Not Modified, but on the /dashboard page, it works fine and I get the correct data.

What I’ve tried:

Changing the route path from relative (‘me’) to absolute (‘/me’), which made the page work, but broke the URL structure.
Using Cache-Control: no-cache headers in Axios, but still getting the 304 response.
Clearing the browser cache and testing in incognito mode, but the issue persists.

Questions:

Why does changing the route path (‘me’ to ‘/me’) affect the behavior of the data fetching?

Why does the request for /dashboard work fine, but /dashboard/me loses the data upon page refresh?

How can I fix the issue and ensure that I always fetch fresh data without altering the URL structure?

Any help would be greatly appreciated!