路由菜单渲染逻辑修改，缓存和tag持久化

hejianhao

2025-04-01 64a6a53b42d2565b0427c9c2d956155f37c488aa

路由菜单渲染逻辑修改，缓存和tag持久化

 src/layouts/components/ElMenu/index.vue

@@ -28,9 +28,9 @@
    };
  },
  mounted() {
    
    // 获取所有定义的一级菜单和多级菜单
    this.routersList = routers.options.routes[0].children;
    // 过滤掉登录路由，只获取主布局下的路由
    this.routersList = routers.options.routes.find(route => route.path === '/').children;
  },
};
</script>

 src/router/index.js

@@ -25,18 +25,21 @@

const routes = [
    {
        path: "/login",
        meta: {
            title: "登录",
            oneself: true,
            hide: true,
        },
        component: () => import("../views/login"),
    },
    {
        path: "/",
        redirect: "login",
        component: Layouts,
        children: [
            {
                path: "/login",
                meta: {
                    title: "登录",
                    oneself: true,
                    hide: true,
                },
                component: () => import("../views/login"),
                path: "",
                redirect: "/projectList/list"
            },
            {
                path: "/projectList",
@@ -90,7 +93,6 @@
                    },
                ],
            }

        ],
    },
];
@@ -106,21 +108,7 @@
    // 设置当前页签名称
    document.title = to.meta.title || '实验室流程';

    // 判断是否需要缓存
    if (to.meta.keepAlive) {
        store.commit('SET_KEEPALIVELIST', [...store.state.keepAliveList, to.name])
    }
    // 设置标签列表
    if (!to.meta.hide || !to.meta.oneself) {
        // 判断是否存在
        let isExist = store.state.tagList.some(item => item.path === to.path)
        if (!isExist) {
            store.commit('SET_TAGLIST', [...store.state.tagList, to])
        }
    }
    next()

    // 没有登录并且要去的页面不是登录页面，在强制跳转到登录
    // 登录验证
    // if (to.path === "/login") {
    //     localStorage.removeItem('userInfo')
    //     next()
@@ -132,19 +120,38 @@
    //     if (to.meta.hasOwnProperty('privilege') && !menus.includes(to.meta.privilege)) {
    //         return
    //     }
    // 设置标签列表
    // if (!to.meta.hide || !to.meta.oneself) {
    //     // 判断是否存在
    //     let isExist = store.state.tagList.some(item => item.path === to.path)
    //     if (!isExist) {
    //         store.commit('SET_TAGLIST', [...store.state.tagList, to])
    //     }
    // }
    //     // 判断是否需要缓存
    //     if (to.meta.keepAlive) {
    //         store.commit('SET_KEEPALIVELIST', [...store.state.keepAliveList, to.name])
    //     }
    //     next()

        // 设置标签列表
        if (!to.meta.hide || !to.meta.oneself) {
            let tagList = JSON.parse(localStorage.getItem('tagList') || '[]')
            // 判断是否存在
            let isExist = tagList.some(item => item.path === to.path)
            if (!isExist) {
                // 只保存必要的信息
                const tagInfo = {
                    path: to.path,
                    name: to.name,
                    meta: to.meta
                }
                tagList.push(tagInfo)
                localStorage.setItem('tagList', JSON.stringify(tagList))
                store.commit('SET_TAGLIST', tagList)
            }
        }

        // 判断是否需要缓存
        if (to.meta.keepAlive) {
            let keepAliveList = JSON.parse(localStorage.getItem('keepAliveList') || '[]')
            // 判断是否已经缓存
            let isExist = keepAliveList.includes(to.name)
            if (!isExist) {
                keepAliveList.push(to.name)
                localStorage.setItem('keepAliveList', JSON.stringify(keepAliveList))
                store.commit('SET_KEEPALIVELIST', keepAliveList)
            }
        }

        next()
    // }
});


 src/store/index.js

@@ -5,8 +5,8 @@
const store = new Vuex.Store({
  state: {
    menus: localStorage.getItem('menuList') ? JSON.parse(localStorage.getItem('menuList')) : [],
    keepAliveList: [],//缓存页面
    tagList: [],//标签列表
    keepAliveList: localStorage.getItem('keepAliveList') ? JSON.parse(localStorage.getItem('keepAliveList')) : [],//缓存页面
    tagList: localStorage.getItem('tagList') ? JSON.parse(localStorage.getItem('tagList')) : [],//标签列表
    isFold: false,//是否折叠
  },
  mutations: {
@@ -15,9 +15,11 @@
    },
    SET_KEEPALIVELIST(state, data) {
      state.keepAliveList = data;
      localStorage.setItem('keepAliveList', JSON.stringify(data));
    },
    SET_TAGLIST(state, data) {
      state.tagList = data;
      localStorage.setItem('tagList', JSON.stringify(data));
    },
    SET_ISFOLD(state, data) {
      state.isFold = data;