由于 URL 中传递的参数而导致手册页刷新的问题 [英] Problem on manual page refresh due to params passed in the URL

问题描述

在 URL 中使用变量时，你们如何推荐页面重新加载(即如果用户按下刷新页面)?

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

我已经使用 nuxt generate 静态生成了一个站点，并将其托管在 http://www.wowrares.com/.该站点正确生成链接，并且在单击侧边栏导航链接时能够导航到该区域，但是如果我要手动输入 http://www.wowrares.com/zone/Ashevale，它说 Page Not Found您似乎访问了一个损坏的链接或输入了该网站上不存在的网址.带有返回主页的链接.

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.

我进行了设置，以便在我通过导航单击某个区域时正确发生 API 调用，但我希望上述行为能够正常工作，因此我假设这必须改变.

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>

用于改变状态的方法:

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

推荐答案

当您转到链接 https://wowrares.com/zone/Ashevale 时，后端会查找特定路径、文件夹, 在您的案例中不存在的文件.我假设您在根目录下有一个 index.html 文件.这就是您从服务器收到该消息的原因.

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.

通常我使用 React 或 Angular 并且对 Vue 不太熟悉，但我猜哈希路由器是您正在寻找的.一旦您复制和粘贴链接或刷新页面，它可以帮助应用程序识别去哪里.

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

一旦你打开链接，后端将忽略 # 字符之后的 URL 部分的其余部分，因此原始根 html 文件将在你需要处理路由的地方打开.

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.

经过快速研究，我在 GitHub 中找到了一个用于 Vue 的简单哈希路由器.另外，您可以在此处进一步了解片段标识符.

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

这篇关于由于 URL 中传递的参数而导致手册页刷新的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！