我正在努力找到最好的方法,让我的多层菜单在重新刷新时保持打开状态.
基本上,如果有人深入到我菜单中的第三层并单击"重新刷新",那么我希望菜单可以重新打开到他们在第三层中导航到的位置,而无需重新打开菜单.
请参阅下面的代码:(使用Vue bootstrap 和Vue.js)
如您所见,我正在重复从数据中获得的每一层.
<div v-for="(main, index) in mainMenu" :key="index">
<template v-if="main.title === 'News'">
<b-link @click="closeAll" v-if="main.type === 'post_type' " :to="'/' + main.slug" v-b-toggle="'collapse'" class="m-1 nobutn" v-html="main.title"></b-link>
</template>
<template v-else>
<b-link v-if="main.type === 'post_type' " :to="'/' + main.slug" v-b-toggle="main.post_name" class="m-1 nobutn" v-html="main.title"></b-link>
<b-link v-else :to="'/' + main.url" v-b-toggle="main.post_name" class="m-1 nobutn" v-html="main.title"></b-link>
</template>
<b-collapse v-model="main.show" v-for="(sub, index) in main.child_items" :key="index" v-bind:id="sub.menu_item_parent" accordion="my-accordion" role="tabpanel">
<template v-if="sub.type === 'post_type'">
<b-link class="secondLayer" :to="'/' + main.slug + '/' + sub.slug" :class="sub.classes">
<b-card v-b-toggle="sub.post_name" class="subTitle" v-html="sub.title"></b-card>
</b-link>
</template>
<template v-else>
<b-link :href="sub.url" target="_blank" :class="sub.classes">
<b-card v-b-toggle="sub.post_name" class="subTitle" v-html="sub.title"></b-card>
</b-link>
</template>
<b-collapse v-for="(subchild, index) in sub.child_items" :key="index" v-bind:id="subchild.menu_item_parent" accordion="my-accordiontwo" role="tabpanel">
<template v-if="subchild.title === 'Members Portal' ">
<b-link class="thirdLayer" :href="subchild.url" target="_blank" :class="subchild.classes">
<b-card v-b-toggle="subchild.post_name" class="subchildTitle" v-html="subchild.title"></b-card>
</b-link>
</template>
<template v-else>
<b-link class="thirdLayer" :to="'/' + main.slug + '/' + sub.slug + '/' + subchild.slug" :class="subchild.classes">
<b-card v-b-toggle="subchild.post_name" class="subchildTitle" v-html="subchild.title"></b-card>
</b-link>
</template>
<b-collapse v-for="(fourthsubchild, index) in subchild.child_items" :key="index" :id="fourthsubchild.menu_item_parent">
<b-link class="fouthLayer" :to="'/' + main.slug + '/' + sub.slug + '/' + subchild.slug + '/' + fourthsubchild.slug" :class="fourthsubchild.classes">
<b-card class="fourthchildTitle" v-html="fourthsubchild.title"></b-card>
</b-link>
</b-collapse>
</b-collapse>
</b-collapse>
</div>
提前谢谢.