Cześć, mam problem z routerem:
Moja templatka:
<template>
<v-container fluid>
<v-layout row wrap>
<v-flex sm3 v-for="friend in friendslist" :key="friend.id">
<v-card
color="transarent"
@click="goToProfile(friend.id)"
>
<v-avatar
size="150">
<v-img :src="friend.photoURL"></v-img>
</v-avatar>
<v-card-text style="color: #FFA255" >
<h3>{{ friend.nick }}</h3>
<h5>{{ friend.email }}</h5>
<h6>{{ friend.id }}</h6>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
Skrypty:
<script>
import axios from 'axios'
import router from '../../router'
import { mapGetters } from 'vuex'
export default {
data() {
return {
friendslist: '',
}
},
computed: {
...mapGetters([
'getToken'
])
},
methods: {
goToProfile(id) {
router.push('user/'+id+'/');
}
},
created() {
axios.get(`/api/users/my-friends`, {
headers: {
Authorization: this.getToken
}
}).then(resp => {
console.log(resp);
this.friendslist = resp.data;
}).catch(e => console.log(e));
}
}
</script>
router.js
{
path: '/user/:id',
name: 'user',
component: User,
children: [
{
path: '/',
component: UserInfo,
name: 'userInfo'
},
{
path: 'friends',
component: Friendslist,
name: 'friends'
},
]
}
I tutaj rodzi się problem, bo powyższy widok znajduje się w paramsach np: /user/1/friends i jeśli kliknę w v-card i wywoła się funkcja, np. z parametrem 2, goToProfile(2), to zamiast /user/2/ zostanę przeniesiony na /user/1/user/2/, co oczywiście jest niepożądane. Ktoś wie jak to naprawić?