首页 > 其他分享 >vue-element-admin 项目中,获取当前左侧菜单栏的Id

vue-element-admin 项目中,获取当前左侧菜单栏的Id

时间:2023-10-24 09:37:16浏览次数:40  
标签:vue return admin route component element menuId meta children

 

 找到 store/modules/permission.js(需要后端在返回的菜单中,添加Id):

const permission = {
    state: {
        routes: [],
        addRoutes: []
    },
    mutations: {
        SET_ROUTES: (state, routes) => {
            state.addRoutes = routes
            state.routes = constantRoutes.concat(routes)
        }
    },
    actions: {
        // 生成路由
        GenerateRoutes({ commit }) {
            return new Promise(resolve => {
                // 向后端请求路由数据
                getRouters().then(res => {
                    const accessedRoutes = filterAsyncRouter(res.data);
                    accessedRoutes.push({ path: '*', redirect: '/401', hidden: true })
                    commit('SET_ROUTES', accessedRoutes)
                    resolve(accessedRoutes)
                })
            })
        }
    }
}

// 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
    return asyncRouterMap.filter(route => {
        // console.log(route.menuId);
        if (route.component) {
            // Layout组件特殊处理
            route.meta.menuId = route.menuId
            if (route.component === 'Layout') {
                route.component = Layout
            } else {
                route.component = loadView(route.component)
            }
        }
        if (route.children != null && route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children)
        }
        return true
    })
}

找到 layout/components/Sidebar/index.js:

activeMenu() {
    const route = this.$route;
    console.log(route);
    if (route.meta.menuId) {
        localStorage.setItem("menuId", route.meta.menuId);
    }
    const { meta, path } = route
    // if set path, the sidebar will highlight the path you set
    if (meta.activeMenu) {
        return meta.activeMenu
    }
    return path
},

这样,在点击菜单的时候,就能获取到当前菜单对应的Id了

标签:vue,return,admin,route,component,element,menuId,meta,children
From: https://www.cnblogs.com/moguzi12345/p/17783961.html

相关文章

  • vue3 和 element-plus 实现指定单元格编辑
    思路1.获取到指定单元格的位置2.通过状态来判断是否展示编辑步骤1.定义变量去确定行和列lettableRowEditId=ref(null),//控制可编辑的每一行lettableColumnEditIndex=ref(null),//控制可编辑的每一列2.在el-table上绑定单元格的点击事件cell-click(单击)cell......
  • vue3|知识点
    双向绑定Proxyproxy只支持对象ref创建的数据是空对象,绑定在其value属性上。监听属性监听对象watch(msg,func(new,old))监听对象的属性watch(()=>msg.name,func)watchEffect(func)自动监听已经引用的值......
  • 1、vue2.0的生命周期
    首先,组建从创建到销毁的过程就是它的生命周期。一共分为4个阶段,创建、挂载、更新以及销毁。第一个阶段:创建beforeCreate(){}//实例创建前,在这个函数内属性和方法都不能使用created(){}//实例已经初始化好了,也完成了数据挂载,可以修改数据、使用......
  • vue环境搭建操作手册
     (1)准备启动环境,打开终端,首先使用如下命令在管理员权限下创建安装目录:sudomkdir-p/usr/local/node然后输入密码,密码为“qingjiao”接着进入/usr/local/目录,修改安装目录拥有者和属组为“qingjiao”,命令如下:cd/usr/local/&&sudochown-Rqingjiao:qingjiaonode/......
  • 记录--vue3 + mark.js | 实现文字标注功能
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助页面效果具体实现新增1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。2、通过选中的文字长度是否大于0或window.getSelection().isCollapsed(返回一个布......
  • VUE为什么在中国如此流行?
    网上有许多前端开发框架的对比,相对的,VUE在综合评分方面还是优秀的。以下是一些StateofJavaScript调查数据结果:使用率:VUE使用者在调研开发者中占比51%;开发者满意度:VUE的综合开发者满意度达到64%;另外,执行速度及启动时间的综合评分也是中等偏上(与Stelte,Angular,React相......
  • 关于elementui的cascader组件多个级联大量数据滚动定位样式导致卡顿问题
    如题,多个cascader级联组件,下拉选项含大量数据,滚动时会有实时样式重新渲染,导致CUP内存溢满而卡顿解决尝试:使用elementui中的内部源码方法处理<script>import{addResizeListener,removeResizeListener}from'element-ui/src/utils/resize-event';...setu......
  • AntDesignVue 通过点击确定按钮实现文件上传
    示例图相关代码<template><div><a-modalv-model:visible="props.uploadVisible"width="1300px":footer="null"maskClosable@......
  • pm2 启动vue项目
    1、[root@iZn4ad58x9jnakdwcyl2qtZaxx]#[email protected]`npmrun-script`:devvue-cli-serviceservebuild:prodvue-cli-servicebuildbuild:stagevue-cli-servicebuild--modestagingpreviewnodebuild/index.js-......
  • vue element 常用正则
    在vue项目中使用element的时候,经常会用到的一些正则验证。exportdefault{textChecked:{pattern:/^[\u4e00-\u9fa5a-zA-Z0-9]{0,50}$/,message:'最多可输入50位字符,仅支持数字、英文大小写、中文',trigger:'blur'},textCheckedAll:{pattern:......