如何在 VUE.js 中重新刷新时保持多层 bcollapse 菜单打开

我正在努力找到最好的方法，让我的多层菜单在重新刷新时保持打开状态.

基本上，如果有人深入到我菜单中的第三层并单击"重新刷新"，那么我希望菜单可以重新打开到他们在第三层中导航到的位置，而无需重新打开菜单.

请参阅下面的代码:(使用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>

提前谢谢.