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