如何为 SPA 页面生成 URL

Question

我一直在研究这个问题，但找不到答案。我正在尝试使用 Vue2 和 F7 创建群聊，所以我使用 GUID 传递到聊天页面：

this.value = 'http://localhost:8088/chat-group/' + this.groupId

但是，如果我在新标签页中打开该链接，它将不起作用。这是我得到的错误：

加载资源失败：服务器响应状态为 404（未找到）

以下是源文件：

<template>
<f7-page :name="name">
<f7-navbar :title="title" :back-link="back" sliding>
    <f7-nav-right>
        <f7-link  href="#">Share</f7-link>
    </f7-nav-right>
</f7-navbar>

    <div class="content-block-title">Create New Chat Group </div>
    <div class="list-block media-list">
        <ul>
            <li>

                    <div class="item-inner">
                        <div class="item-subtitle">Please enter your topic</div>
                        <div class="item-text">{{groupId}}</div>
                    </div>
            </li>

        </ul>
    </div>

    <div class="item-media"><a :href="chatGroupId"><qrcode-vue :value="value" :size="size" level="H"></qrcode-vue></a></div>

</f7-page>
</template>

<script>
    import QrcodeVue from 'qrcode.vue'

    export default {
      data () {
        return {
          title: 'Chat Group',
          name: 'Chat Group',
          back: 'Back',
          groupId: 'new',
          chatGroupId: '',
          responseHTML: '',
          joined: false,
          username: '',
          members: ['abc', 'cba'],
          newMessage: '',
          messages: [{'username': 'abc', 'message': 'hello'}, {'username': 'cba', 'message': 'world'}],
          status: '',
          value: '',
          size: 250
        }
      },
      mounted: function () {
        this.groupId = this.guid()
        this.value = 'http://localhost:8088/chat-group/' + this.groupId

        this.chatGroupId = '/chat-group/' + this.groupId + '/'
          console.log(this.value)

      },
      methods: {
        guid () {
          function s4 () {
            return Math.floor((1 + Math.random()) * 0x10000)
                      .toString(16)
                      .substring(1)
          }
          return s4() + s4() + s4() + s4() + s4() + s4() + s4()
        }
      },
      components: {
        QrcodeVue
      }
    }

</script>

我也在使用 App-Framework，这是 routes.json 文件：

  {
    "path": "/chat-chinese/",
    "component": "ChatChinese.vue"
  },
  {
    "path": "/chat-english/",
    "component": "ChatEnglish.vue"
  },
  {
    "path": "/chat-group/:groupId/",
    "component": "ChatGroup.vue"
  },
  {
    "path": "/chat-groups/",
    "component": "ChatGroups.vue"
  }

Answer 1

您需要使用支持将 URL 重写为默认值的 Web 服务器（例如，index.html 对于大多数单页应用程序）。由于您已经在使用 Firebase，您可以从 Firebase CLI 配置和使用 firebase serve。在运行firebase init 时将所有URL 重写为index.html 的问题直接说Y。

还有很多其他选项可用，但关键是这是服务器端问题，而不是可以通过客户端代码解决的问题。