Wie URL für SPA Seite generieren

Question

Ich habe Forschung zu diesem Thema, aber ich kann meine Antwort nicht finden. Ich versuche, eine Gruppe-Chat mit Vue2 und F7 zu erstellen, so dass ich GUID mit der IRC-Seite weitergeben muß:

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

jedoch die Der Link funktioniert nicht, wenn ich ihn in einem neuen Tab öffne. Dies ist der Fehler Ich erhalte:

fehlgeschlagen Ressource laden: der Server mit einem Status von 404 geantwortet (Not Found)

Im Folgenden finden Sie die Quelldatei:

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

ich bin auch mit App-Framework und das ist die routes.json Datei:

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

Sie müssen verwenden Webserver, der das Umschreiben von URLs in einen Standard unterstützt (z. index.html für die meisten Single-Page-Apps). Da Sie Firebase bereits verwenden, können Sie firebase serve aus der Firebase CLI konfigurieren und verwenden. Sagen Sie einfach Y an die Frage zum Umschreiben aller URLs auf index.html, wenn firebase init ausgeführt wird.

Es gibt auch viele andere Optionen, aber der entscheidende Punkt ist, dass dies ein serverseitiges Problem ist, nicht etwas, das mit clientseitigem Code gelöst werden kann.