Problem on manual page refresh due to params passed in the URL

问题

How do you all recommend page reloads (i.e. if a User presses refresh page) when using variables within the URL?

I've generated a site statically with nuxt generate and am hosting it at http://www.wowrares.com/. The site generates links properly and is able to navigate to the zone when clicking on the sidebar nav link, but if I were to manually enter http://www.wowrares.com/zone/Ashenvale, it says Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site. with a link back to the homepage.

I have it setup so that the API calls are properly occurring when I click on a zone through the navigation, but I would like the above behavior to work properly so I'm assuming this will have to change.

<v-list-item
      v-for="(zone, index) in zones"
      :key="index"
      nuxt
      link
      @click="mobsInfo(zone)"
    >
      <v-list-item-avatar>
        <v-img :src="zone.image"></v-img>
      </v-list-item-avatar>
      <v-list-item-content>
        <nuxt-link :to="{ name: 'zone-id', params: { id: zone.name } }">
          <v-list-item-title class="grey--text subtitle-2">
            {{ zone.name }}
          </v-list-item-title>
        </nuxt-link>
      </v-list-item-content>
    </v-list-item>

The method used to alter the state:

async mobsInfo(zone) {
  this.$store.commit('setZone', zone)
  await this.$store.dispatch('fetchMobs', zone)
}

回答1:

When you go to the link https://wowrares.com/zone/Ashenvale the backend looks for a specific route, folder, file which is not existing in your case. I assume you have an index.html file under the root. That's why you got that message from the server.

Usually I use React or Angular and not that familiar with Vue but I guess hash router is the one what you are looking for. It helps the app identifying where to go once you copy and paste the link or just refresh the page.

Think about the following example, let's say you have the below link:

https://wowrares.com/#/zone/Ashenvale

Once you go the link then backend will ignore the rest of the URL part after the # character thus the original root html file will be opened where you need you handle the routes.

After a quick research I found a simple hash router for Vue in GitHub. Additionaly you can read further about fragment identifier here.

回答2:

In Nuxt when you generate static website, it would not have an idea how to generate the dynamic routes, because there is lack of any context for it.

There is a way you can get around this issue, but I don't know if you are going to like it.. In nuxt-config.js there is a special property that handles this named generate and the usage is simple yet could get annoying if you have to do it constantly.

generate: {
    routes() {
      return [
        '/posts/1',
        '/posts/2',
        '/posts/3',
      ]
    }
  }

You will be pleased to hear that there are 2 things that you can do to make your life easier, first you can make an http request to your API and return an array with those paths. Second you can even create a separate js file, where you export an array with those ids, either fetched from http request or written by hand (yikes) and them import it in nuxt-config.js and pass it to the routes() method.

来源：https://stackoverflow.com/questions/57648560/problem-on-manual-page-refresh-due-to-params-passed-in-the-url

标签

Vue.js

vue-router

nuxt.js