Vue Routes URL: username/pagename - firebase

Question

I create a website template with mock data by using vue & vuetify.
I have different pages like:
localhost:8080/home
localhost:8080/exp
localhost:8080/skills
localhost:8080/about
I would like to use this template for each user and change the structure to this:
localhost:8080/username/home
localhost:8080/username/exp
localhost:8080/username/skills
localhost:8080/username/home
I don't know whether this is the best practice and also I don't know how to do it.
I think that I will use firebase to store and get user related data. Also I am open for any suggestions.
When I go localhost:8080/user/1 I can see everything in User.vue however when I go localhost:8080/user/1/home nothing is rendered. (localhost:8080/home works. I can see everything inside User.vue & Home.vue as well.
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/exp',
name: 'exp',
component: Exp
},
{
path: '/skills',
name: 'skills',
component: Skills
},
{
path: '/about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>

Answer 1

You need to do this in the router. like this:
{
path: 'username',
meta: { label: 'Username'},
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'home',
name: 'Home',
component: Home
},
{
path: 'exp',
name: 'Exp',
component: Cards
},
{
path: 'about',
name: 'About',
component: About
},
{
path: 'other',
name: 'Other',
component: Other
}
]
}
So u add childs to your path.. this makes the url look like /username/exp

Answer 2

The main problem was using ' / home' in the path. This is why it goes localhost:8080/home instead of localhost:8080/user/1/home
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'home',
name: 'home',
component: Home
},
{
path: 'exp',
name: 'exp',
component: Exp
},
{
path: 'skills',
name: 'skills',
component: Skills
},
{
path: 'about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>