2024年前端最新vue-admin-template 动态路由的实现（方式一），面试题分享一个有趣的经历

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

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

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

{

path: ‘index’,

name: ‘CreateActivationCode’,

component: () => import(‘@/views/vipmanage/createactivationcode/index’),

meta: { title: ‘生成激活码’, icon: ‘’ }

}

]

},

]

/**

• 放置服务器可配置的动态路由

*/

export const asyncRoutes = [

{

path: ‘/usermanagement’,

component: Layout,

redirect: ‘/usermanagement/rolemanagement’,

meta: { title: ‘用户管理’, icon: ‘user’ },

children: [

{

path: ‘rolemanagement’,

component: () => import(‘@/views/usermanage/rolemanagement/index’),

meta: { title: ‘角色管理’, icon: ‘’ }

},

{

path: ‘accountlist’,

component: () => import(‘@/views/usermanage/accountlist/index’),

meta: { title: ‘账号列表’, icon: ‘’ }

}

]

},

{

path: ‘/voicemanage’,

component: Layout,

redirect: ‘/voicemanage/albumscategories’,

meta: { title: ‘语音管理’, icon: ‘voice’ },

children: [

{

path: ‘albumscategories’,

component: () => import(‘@/views/voicemanage/albumscategories/index’),

meta: { title: ‘专辑分类’, icon: ‘’ }

},

{

path: ‘listenmanage’,

component: () => import(‘@/views/voicemanage/listenmanage/index’),

meta: { title: ‘收听管理’, icon: ‘’ }

}

]

},

{

path: ‘/appmanagement’,

component: Layout,

redirect: ‘/appmanagement/banner’,

meta: { title: ‘App管理’, icon: ‘app’ },

children: [

{

path: ‘banner’,

component: () => import(‘@/views/appmanage/banner/index’),

meta: { title: ‘Banner管理’, icon: ‘’ }

},

{

path: ‘appversions’,

component: () => import(‘@/views/appmanage/appversions/index’),

meta: { title: ‘App版本管理’, icon: ‘’ }

}

]

},

{

path: ‘/vipmanagement’,

component: Layout,

redirect: ‘/vipmanagement/setmeal’,

meta: { title: ‘VIP管理’, icon: ‘vip’ },

children: [

{

path: ‘setmeal’,

component: () => import(‘@/views/vipmanage/setmeal/index’),

meta: { title: ‘套餐管理’, icon: ‘’ }

},

{

path: ‘activationcode’,

component: () => import(‘@/views/vipmanage/activationcode/index’),

meta: { title: ‘激活码管理’, icon: ‘’ }

},

{

path: ‘activationcodelist’,

component: () => import(‘@/views/vipmanage/activationcodelist/index’),

meta: { title: ‘激活码生成列表’, icon: ‘’ }

},

{

path: ‘activationcodeexport’,

component: () => import(‘@/views/vipmanage/activationcodeexport/index’),

meta: { title: ‘激活码导出列表’, icon: ‘’ }

},

{

path: ‘orderlist’,

component: () => import(‘@/views/vipmanage/orderlist/index’),

meta: { title: ‘订单列表’, icon: ‘’ }

},

{

path: ‘vipequity’,

component: () => import(‘@/views/vipmanage/vipequity/index’),

meta: { title: ‘VIP权益说明’, icon: ‘’ }

}

]

},

{

path: ‘/brandownermanage’,

component: Layout,

redirect: ‘/brandownermanage/brandownerlist’,

alwaysShow: true,

meta: { title: ‘品牌商管理’, icon: ‘brand’ },

children: [

{

path: ‘brandownerlist’,

component: () => import(‘@/views/brandownermanage/brandownerlist/index’),

meta: { title: ‘品牌商列表’, icon: ‘’ }

}

]

},

{

path: ‘/machinemanage’,

component: Layout,

redirect: ‘/machinemanage/machinelist’,

alwaysShow: true,

meta: { title: ‘机器管理’, icon: ‘android’ },

children: [

{

path: ‘machinelist’,

component: () => import(‘@/views/machinemanage/machinelist/index’),

meta: { title: ‘机器列表’, icon: ‘’ }

}

]

},

{

path: ‘/softwaremanage’,

component: Layout,

redirect: ‘/softwaremanage/versions’,

meta: { title: ‘软件管理’, icon: ‘software’ },

children: [

{

path: ‘versions’,

component: () => import(‘@/views/softwaremanage/versions/index’),

meta: { title: ‘版本管理’, icon: ‘’ }

},

{

path: ‘usedirection’,

component: () => import(‘@/views/softwaremanage/usedirection/index’),

meta: { title: ‘使用说明’, icon: ‘’ }

}

]

},

{

path: ‘/officialaccounts’,

component: Layout,

redirect: ‘/officialaccounts/accesssettings’,

meta: { title: ‘公众号设置’, icon: ‘weichat’ },

children: [

{

path: ‘accesssettings’,

component: () => import(‘@/views/officialaccounts/accesssettings/index’),

meta: { title: ‘接入设置’, icon: ‘’ }

},

{

path: ‘menu’,

component: () => import(‘@/views/officialaccounts/menu/index’),

meta: { title: ‘菜单设置’, icon: ‘’ }

},

{

path: ‘attentionreply’,

component: () => import(‘@/views/officialaccounts/attentionreply/index’),

meta: { title: ‘关注回复’, icon: ‘’ }

},

{

path: ‘keywordreply’,

component: () => import(‘@/views/officialaccounts/keywordreply/index’),

meta: { title: ‘关键字回复’, icon: ‘’ }

},

{

path: ‘material’,

component: () => import(‘@/views/officialaccounts/material/index’),

meta: { title: ‘素材管理’, icon: ‘’ }

}

]

},

]

const createRouter = () => new Router({

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

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

routes: constantRoutes.concat(asyncRoutes).concat(errorRoutes)

})

export const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465

export function resetRouter() {

const newRouter = createRouter()

router.matcher = newRouter.matcher // reset router

}

export default router

• 获取动态路由数据api/user.js

import request from ‘@/utils/request’

import qs from ‘qs’

/**

*动态路由

*/

export function getAuthMenu() {

return request({

url: ‘/Admin/Index’,

method: ‘get’

})

}

• 修改权限规则（store/module/permission.js）

vue-admin-template模板本身是没有做权限的，自己创建一个即可，规则自己设定，admin中使用的roles配置的，我这里是自动生成的，本质还是生成新的路由list（只是包含新的路由）

注意：store/module/permission.js和项目根目录下的permission别搞混了

import { asyncRoutes, constantRoutes, errorRoutes } from ‘@/router’

import { getAuthMenu } from ‘@/api/user’

import Layout from ‘@/layout’

import { Message } from “element-ui”

/**

• 后台查询的菜单数据拼装成路由格式的数据
• 这里是demo使用的是以前项目的后台数据，这里强制修改了一下
• @param routes

*/

export function generaMenu(routes, data, parent) {

data.forEach(item => {

let menu

let viewpath

if (parent == “/usermanagement”) {

viewpath = “/usermanage”

} else if (parent == “/appmanagement”) {

viewpath = “/appmanage”

} else if (parent == “/vipmanagement”) {

viewpath = “/vipmanage”

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题