由于 URL 中传递的参数而导致手动页面刷新问题答案

【问题标题】：Problem on manual page refresh due to params passed in the URL由于 URL 中传递的参数而导致手动页面刷新问题
【发布时间】：2019-12-30 02:14:24
【问题描述】：

在 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)
}

【问题讨论】：

标签： vue.js vue-router nuxt.js

【解决方案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。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：