如何在vue.js中的重新订票上打开多层B崩溃菜单？

Question

我正在努力寻找最佳的方法，以使我的多层菜单在Refresh上打开。

基本上，如果有人钻到我菜单中的第三层并单击重新修订，那么我希望菜单打开回到他们在第三层中导航到的地方，而不必重新打开菜单。

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

提前致谢。

Answer 1

一个很难的答案很难，因为我不知道您的设置，并且对Vue-Bootstrap并不熟悉。

它可以在组件设置函数中看起来像这样的东西：

onBeforeMount(() => {
  const thirdMenu = sessionStorage.getItem("thirdMenu");
  if (thirdMenu) {
    yourVariableWhatMenuIsOpen = thirdMenu; // open your third level menu as you want
  }
});

watch(
  () => yourVariableWhatMenuIsOpen,
  () => {
    yourVariableWhatMenuIsOpen
      ? sessionStorage.setItem("key", yourVariableWhatMenuIsOpen)
      : sessionStorage.removeItem("key");
  }
);

yourvariable whatmenuisopen您可能是您为菜单初始化的东西。
而不是 watcher 您可以使用a

希望，这会有所帮助。也许您必须深入研究Vue，但我保证，这很有趣。 :)

Answer 2

页面刷新设置您的整个页面。
您可以在 SessionStorage 。
在打开菜单和安装组件之前设置值，请尝试从会话存储中获取键值。如果可用，请设置菜单重新打开。

编辑：对不起，对于动态的第三层，您应该保存字符串或ID，而不是布尔值。 ）