vue-admin-template 动态路由的实现（方式一），简单聊聊2024年前端开发的现状和思考

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 ‘&