Rest Countries API - Vue

Community feedback

• 

  lloydjohnlandeza•150

  @lloydjohnlandezaPosted over 1 year ago

  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.

  0

  ---

  

  P

  Nitya Gulati•665

  @nityagulatiPosted over 1 year ago

  @lloydjohnlandeza thank you for the feedback! I tried changing the router history mode to hash but it still didn't work. I'll look into the other solutions you suggested.

  0