layuiAdmin刷新保持当前页面

myhkhk

已于 2024-01-09 08:39:58 修改

阅读量688

点赞数 6

文章标签：前端 javascript 开发语言

于 2024-01-09 08:38:19 首次发布

本文链接：https://blog.csdn.net/myhkhk/article/details/135470907

版权

本文介绍如何在layuiadmin的iframe版本中，通过监听菜单点击并使用缓存技术，使页面刷新时保持用户在侧边栏选择的状态。

摘要由CSDN通过智能技术生成

layuiadmin后台管理框架iframe版，
每次刷新整个页面，都会回到首页，
要想点击侧边栏菜单，刷新保持当前页面，可以利用缓存实现保持当前页面
代码如下：

<script>
    layui.config({
        base: '__ROOT__/homeStatic/' // 静态资源所在路径
    }).extend({
        index: 'lib/index' // 主入口模块
    }).use('index', function() {
        var $ = layui.$,
            admin = layui.admin,
            form = layui.form,
            table = layui.table

        var active = {
            // 点击菜单缓存当前页面
            menuEvent() {
                // 刷新
                $('#LAY-system-side-menu').on("click", 'a[lay-href]', function() {
                    var tabNum = $(this).index();
                    var tabUrl = $(this).attr('lay-href');
                    var homeTabMenu = {};
                    homeTabMenu.tabNum = tabNum;
                    homeTabMenu.tabUrl = tabUrl;
                    sessionStorage.setItem("homeTabMenu", JSON.stringify(homeTabMenu));
                })
            },
            // 刷新保持页面
            stopPage() {
                // 刷新保持在当前页面
                var homeTabMenu = sessionStorage.getItem("homeTabMenu");
                homeTabMenu = JSON.parse(homeTabMenu);
                // console.log(homeTabMenu)
                // console.log(homeTabMenu!='' && homeTabMenu.hasOwnProperty('tabUrl'))
                // 将之前的URL设置为iframe的src
                if (homeTabMenu != null && homeTabMenu.hasOwnProperty('tabUrl')) {
                    var a = homeTabMenu.tabUrl;
                    $(`#LAY-system-side-menu a[lay-href="${a}"]`).click();
                    $(`#LAY-system-side-menu a[lay-href="${a}"]`).parents('li').addClass('layui-nav-itemed');
                }
            },
            init: function() {
                this.menuEvent();
                this.stopPage();
            }
        }
        active.init();
    });
</script>