Vue.js 2（Laravel+AdminLTE）刷新页面后侧栏菜单无法折叠问题

1. 刷新后侧边栏状态丢失、类/样式不更新 #

Vue单页应用刷新后组件状态会重置，导致侧边栏的折叠状态和菜单类无法保留。通过localStorage持久化状态并在组件初始化时恢复：

• 在折叠触发方法中保存状态：

  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
      localStorage.setItem('sidebarCollapsed', JSON.stringify(this.isCollapsed));
    }
  }
  

• 在mounted钩子中读取并同步DOM状态：

  mounted() {
    const savedState = localStorage.getItem('sidebarCollapsed');
    if (savedState) {
      this.isCollapsed = JSON.parse(savedState);
      this.syncNestedMenus();
    }
  },
  methods: {
    syncNestedMenus() {
      this.menuItems.forEach(item => {
        const saved = localStorage.getItem(`menu-${item.id}-open`);
        item.isOpen = saved ? JSON.parse(saved) : false;
      });
    }
  }
  

2. 嵌套菜单首次打开后无法关闭 #

AdminLTE的菜单交互依赖jQuery插件，和Vue虚拟DOM更新存在冲突，可通过两种方式解决：

方式一：手动重新初始化AdminLTE菜单插件

mounted() {
  this.initSidebarMenu();
},
updated() {
  this.$nextTick(() => {
    this.initSidebarMenu();
  });
},
methods: {
  initSidebarMenu() {
    $('.sidebar-menu').off('click', '.treeview a');
    if ($.AdminLTE?.tree) {
      $.AdminLTE.tree('.sidebar-menu');
    }
  }
}

方式二：完全用Vue实现嵌套菜单逻辑

抛弃AdminLTE的jQuery依赖，自己实现折叠逻辑，确保响应式更新：

<!-- 模板部分 -->
<li class="nav-item" 
    :class="{ 'menu-is-opening': item.isOpen, 'menu-open': item.isOpen }">
  <a href="#" @click.prevent="toggleMenu(item)">
    <i class="fa fa-folder"></i>
    <span>{{ item.title }}</span>
    <i class="fa fa-angle-left pull-right"></i>
  </a>
  <ul class="nav nav-treeview" 
      :style="{ display: item.isOpen ? 'block' : 'none' }">
    <li class="nav-item" v-for="child in item.children" :key="child.id">
      <a href="#" class="nav-link">{{ child.title }}</a>
    </li>
  </ul>
</li>

// 脚本部分
data() {
  return {
    menuItems: [
      { id: 1, title: '父菜单', isOpen: false, children: [...] }
    ]
  };
},
methods: {
  toggleMenu(item) {
    item.isOpen = !item.isOpen;
    localStorage.setItem(`menu-${item.id}-open`, JSON.stringify(item.isOpen));
  }
},
created() {
  this.menuItems.forEach(item => {
    const saved = localStorage.getItem(`menu-${item.id}-open`);
    item.isOpen = saved ? JSON.parse(saved) : false;
  });
}

3. 确保类和样式的响应式绑定 #

避免直接操作DOM修改类名/样式，改用Vue的:class和:style指令绑定状态，确保状态变化时DOM自动更新：

<aside class="main-sidebar" :class="{ 'sidebar-collapse': isCollapsed }">
  <div class="sidebar">
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" 
          data-widget="treeview" role="menu" data-accordion="false">
        <!-- 菜单项 -->
      </ul>
    </nav>
  </div>
</aside>

内容的提问来源于stack exchange，提问作者Pavanesh Singh