由于URL中传递的参数导致手动刷新页面时出现问题

Question

在URL中使用变量时，如何推荐页面重载(例如，如果用户按下刷新页面)？

我已经用nuxt generate静态地生成了一个站点，并在http://www.wowrares.com/上托管它。该站点正确地生成链接，并且能够在单击侧栏导航链接时导航到该区域，但是如果我手动进入http://www.wowrares.com/zone/Ashenvale，它会显示Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.，并提供一个返回主页的链接。

我对它进行了设置，这样当我通过导航单击一个区域时，API调用就会正确地发生，但我希望上面的行为能够正常工作，所以我假设这一点必须改变。

<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>

用于改变状态的方法：

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

Answer 1

当您转到链接https://wowrares.com/zone/Ashenvale时，后端将查找在您的情况下不存在的特定路由、文件夹、文件。我假设您在根目录下有一个index.html文件。这就是为什么你从服务器收到这条消息的原因。

我通常使用React或Angular，对Vue不是很熟悉，但我猜哈希路由器就是你要找的那个。一旦你复制并粘贴链接，或者只是刷新页面，它就会帮助应用程序识别要去哪里。

考虑一下下面的例子，假设你有下面的链接：

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

一旦你进入链接，那么后端将忽略#字符之后的URL部分的其余部分，因此原始的根html文件将在您需要处理路由的位置打开。

经过快速搜索，我在GitHub中找到了Vue的simple hash router。另外，你可以在这里进一步了解fragment identifier。

Answer 2

在Nuxt中，当你生成静态网站时，它不知道如何生成动态路由，因为它缺乏任何上下文。

有一种方法可以绕过这个问题，但我不知道您是否会喜欢它。在nuxt-config.js中，有一个名为generate的特殊属性来处理这个问题，它的用法很简单，但是如果你必须经常这样做，可能会很烦人。

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

您将很高兴听到有两件事可以让您的生活更轻松，首先，您可以向API发出一个http请求，并返回一个包含这些路径的数组。其次，您甚至可以创建一个单独的js文件，在其中导出一个具有这些in的数组，这些in可以是从http请求中获取的，也可以是手工编写的(yikes)，然后它们将其导入nuxt-config.js中，并将其传递给routes()方法。