Vue.js–新路线总是位于当前路线的顶部

Question

在我的Vue.js应用程序中，我使用屏幕左侧的导航抽屉进行导航。我正在使用Vuetify和Vue Router。

问题更改routes后，我以前的许多路由功能都被搞砸了。每当用户点击一个元素导航到一个新网站时，路线就会像这样附加在前一个网站的顶部。

用户点击链接前的路线：

http://localhost:8080/organization/:organization_id/planner/events

用户点击链接后的新路线：

http://localhost:8080/organization/:organization_id/planner/management/contracts

路由器

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(更新(：

<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>

其他路由，如(NewUser、NewEvent(，不会存储在导航抽屉中，而是通过按钮手动调用

我知道这和我的路线有关。然而，这些并没有被误解，因为父母和孩子之间的关系对于显示正确的内容和实现一些头部信息非常重要。导航抽屉的工作方式也很正确。我没有改变任何东西。

此外，如果我在NewEvent或NewUser上使用router.back()，则不会发生任何情况。：(

非常感谢您的帮助，谢谢！

Answer 1

问题是由于

{ text: 'Events', route:'/planner/events'},

以上路线将网站重定向到http://localhost:8080/planner/events因为最初的正斜杠。

使用$route.params从URL获取参数，如下所示。

<div>User {{ $route.params.organization_id }}</div>

或

this.$route.params.organization_id