Rest Countries API - Vue

Well done doing this challenged! Regarding the issue you mentioned with losing route params on refreshing the Country Info page, it's actually a server-side problem with SPA (Single Page Applications) and not directly related to your code. Since you're using GitHub Pages (github.io), your options for resolving this issue are somewhat limited.

The first and easiest option is to change your router's history mode to use web hash. You can achieve this by modifying your router setup as follows:

const router = createRouter({
    mode: 'history',
    history: createWebHashHistory(), // previous value: createWebHistory()
    routes,
});

By adding a hash at the beginning of your URLs, this approach ensures that your SPA always loads correctly.

The second option is more complex, requiring you to update your 404.html file to load the code from index.html. This way, even when encountering a 404 error, your SPA's code will still be loaded properly.

The third option involves using Netlify instead of GitHub Pages (don't worry netlify is free as well). With Netlify, you can easily resolve this issue by utilizing redirects. You can find more information about using redirects with Netlify here.