vue-element-admin刷新侧边栏数据丢失

在使用vue-element-admin时遇到刷新页面导致侧边栏消失的问题,原因是vuex数据在页面刷新后被重置。解决方案是使用vuex-persistedstate插件,将vuex状态存储到浏览器sessionStorage中,确保刷新后数据仍然存在。
摘要由CSDN通过智能技术生成

        使用vue-element-admin时,刷新页面侧边栏消失😒,仔细查看代码后找到原因,使用的路由与vuex有关,而在刷新页面时vue会重新加载vue实例,vuex中的数据会被初始化,所以看不到侧边栏是因为数据被重置了。

解决方法:将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie)页面刷新后再从浏览器中取出。(利用第三方插件)

1.安装vuex-persistedstate

npm install --save vuex-persistedstate

2. 在store/index.js文件中引入(文件结构如下图)

import createPersistedState from 'vuex-persistedstate'

 //替换原先的实例化的store

const store = new Vuex.Store({

    state: {},

    modules,

    getters,

    // 新增规则保存vuex的值

    plugins: [createPersistedState({

        storage: window.sessionStorage

    })]

})

 文件结构图:

index.js文件代码:

 替换后重新编译再次打开后,无论怎么刷新数据都不会丢失😁

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案。它提供了许多常用的后台管理功能和组件,包括侧边栏、面包屑导航、表格、表单、图表等等。 侧边栏Vue-element-admin 中的一个重要组件,它通常用于展示系统的菜单和功能项。在 Vue-element-admin 中,侧边栏是通过路由配置来生成的。 在路由配置中,每一个路由配置项对应着一个菜单项。菜单项包括菜单的标题、图标、路径、子菜单等信息。当用户点击菜单项时,就会跳转到对应的路由页面。 以下是一个简单的示例,演示如何使用 Vue-element-admin侧边栏组件: ```javascript // 路由配置 const routes = [ { path: '/', redirect: '/dashboard' }, { path: '/dashboard', component: Layout, children: [ { path: '', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } } ] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] } ] // 侧边栏组件 <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse"> <template v-for="(item, index) in menuList"> <el-submenu v-if="item.children" :key="index" :index="index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </template> <template v-for="(subItem, subIndex) in item.children"> <el-menu-item :key="index + '-' + subIndex" :index="index + '-' + subIndex" @click="handleMenuClick(subItem)"> <i :class="subItem.icon"></i> <span slot="title">{{subItem.title}}</span> </el-menu-item> </template> </el-submenu> <el-menu-item v-else :key="index" :index="index" @click="handleMenuClick(item)"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuList: { type: Array, required: true }, activeIndex: { type: String, required: true }, isCollapse: { type: Boolean, required: true } }, methods: { handleMenuClick(item) { this.$emit('menu-click', item) } } } </script> ``` 在这个示例中,路由配置包含了三个路由项,分别对应 Dashboard、Table 和 Tree 三个菜单项。侧边栏组件则使用了 Element UI 中的 Menu 组件来展示菜单项。侧边栏组件的主要作用是传递菜单项列表、当前选中的菜单项和侧边栏是否折叠等参数,以及监听菜单项的点击事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值