Mam ten problem:

Posiadanie tych tras:

user = & gt; /user user.edit = & gt; /user/edit/:id(\d+)? user.view = & gt; /user/:id(\d+)?

user.role = & gt; /user/role user.role.edit = & gt; /user/role/edit/:id(\d+)? user.role.view = & gt; /user/role/:id(\d+)?

Chciałbym utworzyć menu zagnieżdżonych paska bocznego.

<NavbarDropdown :title="'Users'" :name="'user'">
    <template #dropdown>
        <router-link
                v-slot="{ href, route, navigate, isActive }"
                :to="{name: 'user'}">
            <a :class="{'bg-gray-200 text-gray-900': isActive}"
               :href="href"
               @click="navigate">
                Users
            </a>
        </router-link>
        <router-link
                v-slot="{ href, route, navigate, isActive }"
                :to="{name: 'user.role'}">
            <a :class="{'bg-gray-200 text-gray-900': isActive}"
               :href="href"
               @click="navigate">
                Roles
            </a>
        </router-link>
    </template>
</NavbarDropdown>

Jest to komponent rozwijany:

<template>
    <div>
        <router-link
                v-slot="{ href, isActive }"
                :to="{name: name}">
            <div>
                <a :class="{'bg-gray-200 text-gray-900': isActive}"
                    :href="href"
                    @click.prevent="open = !open">
                    {{ title }}
                </a>
                <!-- Expandable link section, show/hide based on state. -->
                <div v-if="open || isActive" class="mt-1 space-y-1">
                    <slot name="dropdown"></slot>
                </div>
            </div>
        </router-link>
    </div>
</template>
<script>
    export default {
        name: 'NavbarDropdown',
        props: {
            title: {
                type: String,
            },
            name: {
                type: String,
                default: ''
            },
        },
        data: () => ({
            open: false,
        }),
        watch: {
            '$route' () {
                this.open = this.$route.matched.some (({name}) => name === this.name);
            }
        },
    };
</script>

Teraz mój problem to:

Pozycja

        <router-link
                v-slot="{ href, route, navigate, isActive }"
                :to="{name: 'user'}">
            <a :class="{'bg-gray-200 text-gray-900': isActive}"
               :href="href"
               @click="navigate">
                Users
            </a>
        </router-link>

Jest aktywny, nawet jeśli trasa "Role" jest aktywna. Jeśli chcę użyć isExactActive, .edit / .view - trasy nie wywołują "aktywnego" stanu.

Jakieś sugestie?

W tej chwili stworzyłem metodę sprawdzenia stanu aktywnego:

isExtendedActive(route){
    return this.$route.matched.some (({name}) => name === `${route}` || name === `${route}.view` || name === `${route}.edit`)
}
0
SPQRInc 8 październik 2020, 17:15

1 odpowiedź

Najlepsza odpowiedź

Znalazłem wykorzystywania tagów Meta Route, aby mogły być przydatne w pomaganiu modułom nawigaci i utrzymywaniu rzeczy podświetlonych na podstawie tego, co mają przedmioty, w których podlegają. Wszystko, co próbowałem, był pieczony do trasy, wydawał się hackish.

Coś jak:

{
  path: /user/edit/:id?,
  name: userEdit,
  componet: //componet import here,
  meta: {
   module: 'user'
  }
},
{
  path: /user/role/:id?,
  name: userEdit,
  componet: //componet import here,
  meta: {
   module: 'user',
   subModule: 'userRole'
  }
}

Następnie można uzyskać dostęp do danych META w szablonie z $route.meta.module ECT, używając tych wartości, aby zdecydować, jakie style mają zastosowanie.

2
innerurge1 8 październik 2020, 21:21