Vue.js – New routes are always placed on top of current route - vue.js

Question

In my Vue.js application I use a navigation drawer on the left side of the screen for navigation purposes. I am using Vuetify and Vue Router.
Problem
After changing my routes a lot of my previously routing functionalities got messed up. Whenever a user clicks on an element to navigate to a new site the route get's attached on top of the previous one like this.
Route before a user clicks on a link:
http://localhost:8080/organization/:organization_id/planner/events
New route after a user clicks on a link:
http://localhost:8080/organization/:organization_id/planner/management/contracts
Router
routes: [
// Login
{
path: '/login',
component: Login,
},
// Organization
{
path: '/organization',
component: Organization,
},
// Organization Detail Page
{
path: '/organization/:organization_id',
component: OrganizationDetail,
children: [
// Module: Planner
{
path: 'planner',
component: Planner
},
// Planner > Events
{
path: 'planner/events',
component: Events
},
{
path: 'planner/events/new',
component: NewEvent
},
{
path: 'planner/events/details/:event_id',
component: EventDetails
},
// Planner > Calendar
{
path: 'planner/calendar',
component: Calendar
},
// Module: Management
{
path: 'management',
component: Management
},
// Management > Users
{
path: 'management/users',
component: Events
},
{
path: 'management/users/new',
component: NewUser
},
{
path: 'management/users/details/:user_id',
component: UserDetails
},
// Planner > Contracts
{
path: 'management/contracts',
component: Contracts
}
]
}
]
NavigationDrawer.vue (updated):
<template>
<div id="navigation">
<nav>
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
width="400"
fixed
app
>
<v-list>
<template v-for="item in items">
<v-row
v-if="item.heading"
:key="item.heading"
align="center"
>
</v-row>
<v-list-group
v-else-if="item.children"
:key="item.text"
v-model="item.model"
append-icon="mdi-chevron-down"
class="nav"
link
router :to="item.route"
>
<v-list-item
v-for="(child, i) in item.children"
:key="i"
link
router :to="child.route"
>
<v-list-item-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ child.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</template>
</v-list>
</v-navigation-drawer>
<v-app-bar
:clipped-left="$vuetify.breakpoint.lgAndUp"
app
dark
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</v-app-bar>
</nav>
</div>
</template>
<script>
export default {
name: 'NavigationDrawer',
el: '#app',
data: () => ({
drawer: true,
menu: false,
items: [
{
text: 'Planner',
children: [
{ text: 'Events', route:'/organization/' + this.$route.params.organization_id + '/planner/events'},
{ text: 'Calendar', route:'/organization/' + this.$route.params.organization_id + '/planner/calendar'}
],
},
{
text: 'Management',
children: [
{ text: 'Users', route:'/organization/' + this.$route.params.organization_id + '/management/users'},
{ text: 'Contracts', route:'/organization/' + this.$route.params.organization_id + '/management/contracts'}
],
},
]
}),
methods: {
logout() {
// some awesome stuff
}
}
}
</script>
Other routes like (NewUser, NewEvent) are not stored in the navigation drawer and called manually by a button.
I know that this has something to do with my routes. However those aren't misconfigured because the relations between parent and children are important for displaying the right content and implementing some header informations. The navigation drawer works also the right way. I didn't change anything there.
Also if I use router.back() on NewEvent or NewUser nothing happens. :(
Help is very much appreciated, thanks!

Answer 1

The issue is because of
{ text: 'Events', route:'/planner/events'},
The above route redirects the website to http://localhost:8080/planner/events because of initial forward slash.
Use the $route.params to get params from URL like the following.
<div>User {{ $route.params.organization_id }}</div>
or
this.$route.params.organization_id