SPAのURLを生成する方法

Question

私はこの問題について研究してきましたが、私の答えは見つかりません。私はVue2とF7とグループチャットを作成しようとしていますので、私はチャットページに渡すGUIDを使用します。

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

しかし、新しいタブで開くとリンクが機能しません。

がリソースをロードに失敗しました：これは私が取得していますエラーです

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

：サーバが（見つかりません）404の状況の下

は、ソースファイルであると答えました私はまた、アプリケーション・フレームワークを使用していますが、これは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をデフォルト（例：ほとんどのシングルページアプリの場合はindex.html）。 Firebaseを既に使用しているので、のfirebase serveを設定して使用することができます。 firebase initを実行すると、すべてのURLをindex.htmlに書き換えることについての質問にYと言ってください。

他にもたくさんのオプションがありますが、これはサーバー側の問題であり、クライアント側のコードで解決できるものではありません。