Cześć, chciałbym dodać do apki dynamiczne routy, żeby móc wejść w profil usera z jego id i następnie przejść do np. /user/1/settings, jednak natrafiam na problem:
router.js:
path: '/user',
component: User,
children: [
{
path: ':id/settings',
component: Settings,
name: 'settings'
},
Mój komponent:
Tutaj mam pętlę po obiekcie. która mi generuje klikalną listę do zmiany widoku:
<v-list dark class="mt-5 userList">
<v-list-item
v-for="item in sideBar"
:key="item.title"
class="tile"
>
<router-link :to="item.route">
<span class="userIcon">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
</span>
<span class="userTitle">
<v-list-item-content>
<v-list-item-title>
{{ item.title }}
</v-list-item-title>
</v-list-item-content>
</span>
</router-link>
</v-list-item>
</v-list>
skrypt:
sideBar: [
{title: 'User', icon: 'note', component: 'UserInfo', route: '/user/'+this.id},
{title: 'Rated albums', icon: 'note', component: 'Rated', route: '/user/'+this.id+'/rated'},
{title: 'Owned', icon: 'favorite', component: 'Owned', route: '/user/'+this.id+'/owned'},
{title: 'Settings', icon: 'settings', component: 'Settings', route: '/user/'+this.id+'/settings'},
],
watch: {
'$route'(to, from) {
this.id = to.params.id;
}
},
Zwraca mi undefined. Ktoś wie jak to dobrze zrobić? Routing sprawia mi jeszcze trochę problemów.
EDIT: Jak pobieram ID zalogowanego usera z Vuex i próbuję go wrzucić do id to nadal pokazuje undefined w pasku z adresem url, mimo, że w templatce normalnie renderuje numer id