循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理(1)

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

},

{

id: ‘3-2-2’,

pid: ‘3-2’,

text: ‘三级菜单2’,

name: ‘menu1-1’,

icon: ‘form’

},

{

id: ‘3-2-3’,

pid: ‘3-2’,

text: ‘三级菜单3’,

name: ‘menu1-2’,

icon: ‘form’

},

{

id: ‘3-2-4’,

pid: ‘3-2’,

text: ‘三级菜单4’,

name: ‘menu1-3’,

icon: ‘form’

}

]

}

]

},

{

id: ‘99’,

pid: ‘-1’,

text: ‘公司官网’,

icon: ‘table’,

name: ‘external-link’

}

]

菜单的JSON是根据角色进行动态获取的，不同的角色对应不同的菜单集合，并且菜单是一个多层次的树列表，可以定义无穷多级的展示，JSON格式化视图如下所示。

而Vue前端需要初始化定义前端页面的所有路由，这些包括路由页面的Layout等信息。

我们可以在一个JS文件里面定义好对应前端所有的路由信息，如下所示:

// 定义本系统的所有路由，具体路由呈现经过菜单数据过滤

export const asyncRoutes = {

‘dashboard’: {

path: ‘/dashboard’,

component: Layout,

children: [{

path: ‘dashboard’,

name: ‘dashboard’,

component: () => import(‘@/views/dashboard/index’)

}]

},

‘product’: {

path: ‘/product’,

component: Layout,

children: [{

path: ‘/product’,

name: ‘product’,

component: () => import(‘@/views/Product/index’)

}]

},

… //省略部分

‘icon’: {

path: ‘/icon’,

component: Layout,

children: [{

path: ‘/icon’,

name: ‘icon’,

component: () => import(‘@/views/icons/index’)

}]

},

‘external-link’: {

path: ‘http://www.iqidi.com’,

name: ‘external-link’

}

}

这里的路由不需要嵌套，因为菜单展示才需要定义嵌套关系。

另外，由于系统在未登录请求后端动态菜单前，我们系统也需要正常运行起来，那么就需要预设一些基础的路由信息，如登录界面、重定向页面、首页链接等这些路由信息，因此我们可以分开两个路由对象，用来分开管理这些信息。

对路由的管理，一个需要默认创建路由的处理、重置路由的处理，以及动态设置新的路由处理，我们封装几个函数来处理这些操作。

const createRouter = () => new Router({

// mode: ‘history’, // require service support

scrollBehavior: () => ({ y: 0 }),

routes: constantRoutes

})

const router = createRouter()

// 重置路由

export function resetRouter() {

const newRouter = createRouter()

router.matcher = newRouter.matcher // reset router

}

用户在经过登录界面处理后，就会通过对应的Action获取动态路由信息（注意，这里是先获取动态菜单，然后过滤本地路由，即为动态路由信息），获得动态路由后，就设置前端所能访问的路由集合即可，如下代码所示。

有了这些新的路由允许，前端系统的菜单才能够正常运转起来，否则即使界面展示了菜单，也不能访问特定的视图页面而跳到了404页面，因为路由没有。

3、登录的过程处理

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

前面大概介绍了路由的处理过程，其实我们路由信息，应该需要从登录界面开始讲起。

以登录界面为例，在用户登录处理后，需要先验证用户的账号密码，成功后继续请求该用户对应的动态菜单集合，并通过路由切换到对应的页面或者首页。

在Store/Modules/user.js模块里面，定义了对应的登陆处理Action，如下所示:

我们这里忽略用户登录的检验和处理token的过程，主要关注动态菜单请求并设置路由的过程。

在我们需要拦截路由到达前的处理中，我们定义对应的路由信息请求逻辑，如下所示。

router.beforeEach(async(to, from, next) => {

在处理菜单路由的对应模块里面，我们定义了一个状态用来承载这些重要信息，如下定义State所示。

const state = {

menuItems: [],

routes: [],

addRoutes: [],

asyncRoutes: asyncRoutes

}

// 定义了路由和菜单的Mutation

const mutations = {

SET_ROUTES: (state, routes) => {

// var list = convertRoute(routes)

routes.push({ path: ‘*’, redirect: ‘/404’, hidden: true }) // 此为默认错误路由

state.addRoutes = routes

state.routes = [].concat(routes)// constantRoutes.concat(routes)

},

SET_MENUS: (state, menus) => {

state.menuItems = menus

}

}

// 定义了生成动态路由的Action处理

const actions = {

generateRoutes({ commit }, roles) {

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

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

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中…(img-z716qceW-1715234158593)]