2024年最新关于vue的多页面标签功能_vue2 多页签页面，阿里巴巴前端面试题及答案

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

            if (item.path == routeMenu.page.path) {
                deletekey = key;
                state.visitedMenus.splice(key, 1);
                state.menuNames.splice(key, 1);
                break;
            }
        }
        return Promise.resolve({
            visitedMenus: state.visitedMenus,
            deletekey: deletekey,
            deletPath: routeMenu.page.path,
        })
    }
}

})
export default store

4.router文件下的common.js代码

import router from “@/router/index.js”;
export const changeMeta = (nowPath, fromType) => {
let firstModule = nowPath.split(“/”)[1];
let routes = router.options.routes;
let firstPathIndex = routes.findIndex((v) => v.path.indexOf(firstModule) != -1);
// 获取路由里面的二级path
let secondModule = nowPath.split(“/”)[2];//路由只能有一个/代表的内容，否则失效
let secondPathIndex = routes[firstPathIndex].children.findIndex((v) => v.path == secondModule);
if (fromType == ‘cancelKeep’) {
// 点击左侧栏或者最顶部headr
router.options.routes[firstPathIndex].children[secondPathIndex].meta.keepAlive = false
} else if (fromType == ‘saveKeep’) {
router.options.routes[firstPathIndex].children[secondPathIndex].meta.keepAlive = true
}
}

5.router文件下的index.js是路由文件。部分代码示例如下

{
// 系统管理模块
path: ‘/system’,
name: ‘S’,
component: SystemManagement,
children: [{
path: ‘user’,
name: ‘S01’,
component: User,
meta: { titleText: ‘用户列表’, keepAlive: true }
}
]
}

6.顶部菜单代码。@/api/storage.js该文件主要是本地存存储的方法调用，可自行写

系统管理

{{ userInfo.nickName }}

{{ userInfo.username }}