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

您需要使用支持将网址重写为默认网址的网络服务器（例如，对于大多数单页应用，例如No module named polls.urls）。由于您已经使用了Firebase，因此您可以配置并使用Firebase CLI中的index.html。在运行firebase serve时，只需对Y重写所有网址的问题index.html。

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

如何为SPA页面生成URL

1 个答案: