How to generate URL for SPA Page - firebase

Question

I've been doing research on this issue but I cannot find my answer. I am trying to create a group chat with Vue2 and F7, so I use GUID to pass to the chat page:
this.value = 'http://localhost:8088/chat-group/' + this.groupId
However, the link doesn't work if I open it in a new tab. This is the error I am getting:
Failed to load resource: the server responded with a status of 404 (Not Found)
Below is the source file:
<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>
I am also using App-Framework, and this is the routes.json file:
{
"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

You need to use a web server that supports rewriting URLs to a default (e.g. index.html for most Single-Page Apps). Since you're using Firebase already, you could configure and use firebase serve from the Firebase CLI. Just say Y to the question about rewriting all URLs to index.html when running firebase init.
There are plenty of other options available as well, but the key point is that this is a server-side issue, not something that can be solved with client-side code.