Web前端最全vue+element-ui实现动态的权限管理和菜单渲染_权限设置ui(1),一文全懂

跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。

data: [{
id: 1,
label: ‘一级 1’,
children: [{
id: 4,
label: ‘二级 1-1’,
children: [{
id: 9,
label: ‘三级 1-1-1’
}, {
id: 10,
label: ‘三级 1-1-2’
}]
}]
}, {
id: 2,
label: ‘一级 2’,
children: [{
id: 5,
label: ‘二级 2-1’
}, {
id: 6,
label: ‘二级 2-2’
}]
}, {
id: 3,
label: ‘一级 3’,
children: [{
id: 7,
label: ‘二级 3-1’
}, {
id: 8,
label: ‘二级 3-2’
}]
}]
复制代码



> 
> 这里选择这个树形控件,是因为其数据结构和我们的 注册路由信息结构十分接近,不需要再重新修改路由信息的数据结构,即可完美的 展现在 Three树形控件里
> 
> 
> 


2、将侧边导航所需要的路由信息对象 抽离成一个数组,根据后台返回的数组,筛选出对应的路由信息,通过addRoutes添加到路由信息对象里,即可完成路由信息的动态添加


#### 详情



// 在router.js 路由文件 新建数组路由存储 ‘/’ 父路由下的所有子路由(这里所有的动态路由均为 ‘/’ 的子路由)
let routerLists=[
{
id:1,
path: ‘’,
label: ‘首页’,
redirect: ‘/index’, //重定向到
meta:{
title: ‘首页’,
table: true,
display: false,
icon: ‘el-icon-s-home’
}
},
{
id: 2,
path: ‘/index’,
name: ‘index’,
label: ‘首页’,
component: _import(‘Index/Index’),
meta:{
title: ‘首页’,
table: true,
display:true,
icon: ‘el-icon-s-home’
}
},
{
id: 3,
path: ‘/shop’,
name: ‘shop’,
label: ‘商品管理’,
component: _import(‘Shop/Shop’),
meta:{
title: ‘商品列表’,
table: true,
display:true,
icon: ‘el-icon-s-operation’
}
},
{
id:20,
path: ‘/admin’,
label: ‘管理员列表’,
component: _import(‘admin/index’),
meta:{
title: ‘管理员列表’,
table: true,
display:true,
icon: ‘el-icon-s-custom’
},
children:[
{
id:21,
path: ‘/admin/index’,
label: ‘管理员列表’,
component: _import(‘admin/admin’),
meta:{
title: ‘管理员列表’,
table: true,
display:true,
icon:‘el-icon-tickets’
}
},
{
id:22,
path: ‘/admin/adminlist’,
label: ‘添加管理员’,
component: _import(‘admin/adminlist’),
meta:{
title: ‘添加管理员’,
table: true,
display:true,
icon:‘el-icon-document-remove’
}
}
]
}
]

//定义 上面数组的父路由
let routerAlls=[ //这里为routerLists的父路由
{
path: ‘/’,
component: Home
}
]

1 .权限配置表
// 先把路由信息对象字符串化,然后去除component字段 ,再传递给 权限配置表
let routerListString =JSON.stringify(routerLists)
let src= routerListStr(routerListString)
store.commit(‘serRouterList’,src)

let arr=[1,2,3,20,21,22] //这里为权限列表数组(既后台根据用户身份返回的对应的路由数组)

//根据权限配置表(arr数组)和动态路由信息对象(routerLists数组) 获取本用户的路由信息表,并添加到 routerAlls 路由的二级路由里

2.获取动态路由

routerAlls[0].children = routerListFun(arr,routerLists)
//获取 路径 ‘/’ 的子路由,并添加至 routerAlls 这里的 routerListFun函数 为 根据权限列表数组(arr)筛选动态路由信息对象(routerLists) PS:函数内容见 文章末尾:附录

3.获取侧边导航栏 的 渲染菜单 数组

//根据权限配置表数组(arr)和动态路由信息对象(routerLists) 获取本用户的菜单列表
let mentParse =JSON.parse(JSON.stringify(src))
let menuList = routerListFun(arr,mentParse) //这里routerListFun函数注意去除返回数组中的component
store.commit(‘setMents’,menuList) //将其添加到vuex

// 注册路由
let routers =new Router({
mode: ‘history’,
// base: process.env.BASE_URL,
routes: [
{
path: ‘/loading’,
name: ‘loading’,
component: () => import(‘…/views/Load/Loading.vue’),
meta:{
title: ‘登陆’,
table: false
}
}
]
})

// 将筛选后的路由信息对象添加至路由表
routers.addRoutes(routerAlls)

// 进行全局导航守卫
routers.beforeEach((to,from,next)=>{

  if(to.path != '/loading'){
      
      let username=store.state.load.userList.username
      
      if(username){
        next()
      }else{

        next({
          path:'/loading',
          query:{
            path:to.path
          }
        }) 
      }
  }else{
    next()
  }   

})

export default routers;
复制代码


#### 附录



> 
> 1.动态路由书写规则
> 
> 
> 



  • 路由书写规则
  • 1、只有一级路由(实际为二级路由):
  • {
       id: 2,                                  //ID全局不能重复
       path: '/index',                         //路由路径 全局不能重复
       name: 'index',                          //名字,全局不能重复,存在二级路由,则一级路由不能有名字
       label: '首页',                          // 页面名称(用于权限配置时 显示名称使用)
       component: _import('Index/Index'),      // 文件地址(此处对应的是views目录)
       meta:{
         title: '首页',                        //页面名称(横向teble标签切换)
         table: true,                          // 是否显示 teable 切换按钮
         display:true,                         //  是否在侧边导航菜单显示
         icon: 'el-icon-s-home'                //  侧边导航的icon图标
       }
     }
    
    2、包含二级路由(实际为三级路由)
    {
    id:20, //ID全局不能重复
    path: ‘/admin’, //路由路径 全局不能重复(此处为父级))
    label: ‘管理员列表’, // 页面名称(用于权限配置时 显示名称使用)
    component: _import(‘admin/index’), // 文件地址(此处对应的是views目录)注意:此文件下 应包含(router-view 标签 来显示子页面)
    meta:{
    title: ‘管理员列表’, //页面名称(横向teble标签切换)
总结

=============================================================

从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。

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

个人将这段时间所学的知识,分为三个阶段:

第一阶段:HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

  • 推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。

  • 大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。

  • 29
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现一个无限级动态菜单树,可以使用 Element UI 的 Tree 组件。以下是一个简单的实现示例: 首先,需要在 Vue 中引入 Element UI 的 Tree 组件: ```javascript import { Tree } from 'element-ui'; ``` 然后,可以在 Vue 的模板中使用 `el-tree` 标签来渲染 Tree 组件: ```html <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> ``` 其中,`menuData` 是菜单数据,`treeProps` 是 Tree 组件的属性配置对象,`handleNodeClick` 是 Tree 组件的点击事件处理函数。 接下来,我们来看一下如何实现动态加载菜单数据。首先,需要在 Vue 的 `mounted` 生命周期中调用一个方法来获取菜单数据: ```javascript mounted() { this.getMenuData(); }, methods: { getMenuData() { // 通过接口获取菜单数据 } } ``` 接着,在菜单数据获取成功后,需要将数据转换成符合 Tree 组件要求的格式,并将数据保存在 Vue 实例的 `menuData` 属性中: ```javascript getMenuData() { // 通过接口获取菜单数据 // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性中 this.menuData = menuData; } ``` 最后,我们来看一下如何处理 Tree 组件的点击事件。在 `handleNodeClick` 方法中,可以根据节点的 `level` 属性来判断当前节点是否为叶子节点。如果是叶子节点,则可以执行相应的操作,比如打开对应的页面;否则,需要递归获取子节点的数据并更新 Tree 组件的数据源: ```javascript handleNodeClick(node) { if (node.level === 2) { // 点击了叶子节点,执行相应操作 // 比如打开对应的页面 window.location.href = node.url; } else { // 点击了非叶子节点,递归获取子节点数据并更新 Tree 组件的数据源 const childNodes = await this.getChildNodes(node); node.children = childNodes; this.menuData = [...this.menuData]; } }, async getChildNodes(node) { // 通过接口获取子节点数据 const childNodesData = await getChildrenData(node.id); // 将数据转换成符合 Tree 组件要求的格式 const childNodes = convertMenuData(childNodesData); return childNodes; } ``` 至此,一个简单的无限级动态菜单树就实现了。完整的代码可以参考下面的示例: ```html <template> <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> </template> <script> import { Tree } from 'element-ui'; export default { components: { [Tree.name]: Tree }, data() { return { menuData: [], treeProps: { label: 'name', children: 'children' } }; }, mounted() { this.getMenuData(); }, methods: { async getMenuData() { // 通过接口获取菜单数据 const data = await getMenuData(); // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性中 this.menuData = menuData; }, async handleNodeClick(node) { if (node.level === 2) { // 点击了叶子节点,执行相应操作 // 比如打开对应的页面 window.location.href = node.url; } else { // 点击了非叶子节点,递归获取子节点数据并更新 Tree 组件的数据源 const childNodes = await this.getChildNodes(node); node.children = childNodes; this.menuData = [...this.menuData]; } }, async getChildNodes(node) { // 通过接口获取子节点数据 const childNodesData = await getChildrenData(node.id); // 将数据转换成符合 Tree 组件要求的格式 const childNodes = convertMenuData(childNodesData); return childNodes; } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值