Comment générer URL SPA page

Question

J'ai fait des recherches sur cette question, mais je ne peux pas trouver ma réponse. Je suis en train de créer un groupe de discussion avec vue2 et F7, donc j'utilise GUID pour passer à la page de chat:

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

Cependant, la Le lien ne fonctionne pas si je l'ouvre dans un nouvel onglet. Ceci est l'erreur que je reçois:

Impossible de charger la ressource: le serveur a répondu avec un statut de 404 (Introuvable)

est en dessous du fichier source:

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

J'utilise aussi App-Framework, et c'est le fichier 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

Vous devez utiliser un serveur Web prenant en charge la réécriture d'URL par défaut (par ex. index.html pour la plupart des applications mono-page). Puisque vous utilisez déjà Firebase, vous pouvez configurer et utiliser firebase serve à partir du Firebase CLI. Il suffit de dire Y à la question sur la réécriture des URL à toutes index.html lors de l'exécution firebase init.

Il y a beaucoup d'autres options disponibles aussi bien, mais le point essentiel est que c'est un problème côté serveur, pas quelque chose qui peut être résolu avec le code côté client.