Data Lost Between Routes in Vue.js on Refresh

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:

export const axiosInstance: AxiosInstance = axios.create({
    baseURL: 'v1/',
    timeout: 1000,
    headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',   // Disable cache
        // 'Pragma': 'no-cache',           // HTTP 1.0 compatibility
        // 'Expires': '0',                 // Ensures cache is expired
    }
})

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!

That a request works when made on top-level route but fails on nested one with HTML response suggests that a possible cause is that it was made to wrong URL. This should be seen in network requests in dev tools.

This is a common problem for the applications that use relative URLs for the requests and don't have correctly set <base>.

It's virtually never desirable to make API requests to relative path. Since Axios is used, it should be baseURL: '/v1/ instead of baseURL: 'v1/.