From a932272b8fefe836940007e6126b9c2786e99e0d Mon Sep 17 00:00:00 2001 From: Pan Date: Thu, 26 Oct 2017 18:27:39 +0800 Subject: [PATCH] refactor:router --- src/router/index.js | 181 ++++++++++++-------- src/views/layout/components/Levelbar.vue | 8 +- src/views/layout/components/SidebarItem.vue | 18 +- 3 files changed, 122 insertions(+), 85 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index a4cc7b9b..f16027cc 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -11,30 +11,40 @@ import Layout from '../views/layout/Layout' /** * icon : the icon show in the sidebar * hidden : if `hidden:true` will not show in the sidebar +* title : the name show in submenu and levelbar * redirect : if `redirect:noredirect` will no redirct in the levelbar -* noDropdown : if `noDropdown:true` will has no submenu * meta : { role: ['admin'] } will control the page role **/ + export const constantRouterMap = [ - { path: '/login', component: _import('login/index'), hidden: true }, - { path: '/authredirect', component: _import('login/authredirect'), hidden: true }, - { path: '/404', component: _import('errorPage/404'), hidden: true }, - { path: '/401', component: _import('errorPage/401'), hidden: true }, + { path: '/login', component: _import('login/index'), hidden: true }, + { path: '/authredirect', component: _import('login/authredirect'), hidden: true }, + { path: '/404', component: _import('errorPage/404'), hidden: true }, + { path: '/401', component: _import('errorPage/401'), hidden: true }, + { path: '/', component: Layout, redirect: '/dashboard', - name: '首页', hidden: true, - children: [{ path: 'dashboard', component: _import('dashboard/index') }] + children: [{ + path: 'dashboard', + component: _import('dashboard/index'), + name: 'dashboard', + meta: { title: '首页' } + }] }, + { path: '/introduction', component: Layout, redirect: '/introduction/index', - icon: 'people', - noDropdown: true, - children: [{ path: 'index', component: _import('introduction/index'), name: '简述' }] + children: [{ + path: 'index', + component: _import('introduction/index'), + name: 'introduction', + meta: { title: '简述', icon: 'people' } + }] } ] @@ -49,137 +59,162 @@ export const asyncRouterMap = [ path: '/permission', component: Layout, redirect: '/permission/index', - name: '权限测试', - icon: 'lock', meta: { role: ['admin'] }, - noDropdown: true, - children: [{ path: 'index', component: _import('permission/index'), name: '权限测试页', meta: { role: ['admin'] }}] + children: [{ + path: 'index', + component: _import('permission/index'), + name: 'permission', + meta: { + title: '权限测试页', + icon: 'lock', + role: ['admin'] + } + }] }, + { path: '/icon', component: Layout, - icon: 'icon', - noDropdown: true, - children: [{ path: 'index', component: _import('svg-icons/index'), name: 'icons' }] + children: [{ + path: 'index', + component: _import('svg-icons/index'), + name: 'icons', + meta: { title: '图标', icon: 'icon' } + }] }, + { path: '/components', component: Layout, redirect: '/components/index', - name: '组件', - icon: 'component', + name: 'components', + meta: { + title: '组件', + icon: 'component' + }, children: [ - { path: 'index', component: _import('components/index'), name: '介绍 ' }, - { path: 'tinymce', component: _import('components/tinymce'), name: '富文本编辑器' }, - { path: 'markdown', component: _import('components/markdown'), name: 'Markdown' }, - { path: 'jsoneditor', component: _import('components/jsonEditor'), name: 'JSON编辑器' }, - { path: 'dndlist', component: _import('components/dndList'), name: '列表拖拽' }, - { path: 'splitpane', component: _import('components/splitpane'), name: 'SplitPane' }, - { path: 'avatarupload', component: _import('components/avatarUpload'), name: '头像上传' }, - { path: 'dropzone', component: _import('components/dropzone'), name: 'Dropzone' }, - { path: 'sticky', component: _import('components/sticky'), name: 'Sticky' }, - { path: 'countto', component: _import('components/countTo'), name: 'CountTo' }, - { path: 'mixin', component: _import('components/mixin'), name: '小组件' }, - { path: 'backtotop', component: _import('components/backToTop'), name: '返回顶部' } + { path: 'index', component: _import('components/index'), name: 'componentIndex', meta: { title: '介绍' }}, + { path: 'tinymce', component: _import('components/tinymce'), name: 'tinymce', meta: { title: '富文本编辑器' }}, + { path: 'markdown', component: _import('components/markdown'), name: 'markdown', meta: { title: 'Markdown' }}, + { path: 'json-editor', component: _import('components/jsonEditor'), name: 'jsonEditor', meta: { title: 'JSON编辑器' }}, + { path: 'dnd-list', component: _import('components/dndList'), name: 'dndList', meta: { title: '列表拖拽' }}, + { path: 'splitpane', component: _import('components/splitpane'), name: 'splitpane', meta: { title: 'SplitPane' }}, + { path: 'avatar-upload', component: _import('components/avatarUpload'), name: 'avatar-upload', meta: { title: '头像上传' }}, + { path: 'dropzone', component: _import('components/dropzone'), name: 'dropzone', meta: { title: 'Dropzone' }}, + { path: 'sticky', component: _import('components/sticky'), name: 'sticky', meta: { title: 'Sticky' }}, + { path: 'count-to', component: _import('components/countTo'), name: 'count-to', meta: { title: 'CountTo' }}, + { path: 'mixin', component: _import('components/mixin'), name: 'componentMixin', meta: { title: '小组件' }}, + { path: 'back-to-top', component: _import('components/backToTop'), name: 'backToTop', meta: { title: '返回顶部' }} ] }, + { path: '/charts', component: Layout, redirect: '/charts/index', - name: '图表', - icon: 'chart', + name: 'charts', + meta: { + title: '图表', + icon: 'chart' + }, children: [ - { path: 'index', component: _import('charts/index'), name: '介绍' }, - { path: 'keyboard', component: _import('charts/keyboard'), name: '键盘图表' }, - { path: 'keyboard2', component: _import('charts/keyboard2'), name: '键盘图表2' }, - { path: 'line', component: _import('charts/line'), name: '折线图' }, - { path: 'mixchart', component: _import('charts/mixChart'), name: '混合图表' } + { path: 'index', component: _import('charts/index'), name: 'chartsIndex', meta: { title: '介绍' }}, + { path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboard', meta: { title: '键盘图表' }}, + { path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboard2', meta: { title: '键盘图表2' }}, + { path: 'line', component: _import('charts/line'), name: 'line', meta: { title: '折线图' }}, + { path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: '混合图表' }} ] }, + { path: '/example', component: Layout, redirect: 'noredirect', - name: '综合实例', - icon: 'example', + name: 'example', + meta: { + title: '综合实例', + icon: 'example' + }, children: [ { path: '/example/table', component: _import('example/table/index'), redirect: '/example/table/table', name: 'Table', - icon: 'table', + meta: { + title: 'Table', + icon: 'table' + }, children: [ - { path: 'dynamictable', component: _import('example/table/dynamictable/index'), name: '动态table' }, - { path: 'dragtable', component: _import('example/table/dragTable'), name: '拖拽table' }, - { path: 'inline_edit_table', component: _import('example/table/inlineEditTable'), name: 'table内编辑' }, - { path: 'table', component: _import('example/table/table'), name: '综合table' } + { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: '动态table' }}, + { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: '拖拽table' }}, + { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'table内编辑' }}, + { path: 'table', component: _import('example/table/table'), name: 'tableDemo', meta: { title: '综合table' }} ] }, - { path: 'form/edit', icon: 'form', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }}, - { path: 'form/create', icon: 'form', component: _import('example/form'), name: '创建Form' }, - { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'Tab' } + { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }}, + { path: 'form/edit', icon: 'form', component: _import('example/form'), name: 'formEdit', meta: { title: '编辑Form', isEdit: true }}, + { path: 'form/create', icon: 'form', component: _import('example/form'), name: 'FormCreate', meta: { title: '创建Form' }} ] }, + { path: '/error', component: Layout, redirect: 'noredirect', - name: '错误页面', - icon: '404', + name: 'errorPages', + meta: { + title: '错误页面', + icon: '404' + }, children: [ - { path: '401', component: _import('errorPage/401'), name: '401' }, - { path: '404', component: _import('errorPage/404'), name: '404' } + { path: '401', component: _import('errorPage/401'), name: '401', meta: { title: '401' }}, + { path: '404', component: _import('errorPage/404'), name: '404', meta: { title: '404' }} ] }, + { - path: '/errlog', + path: '/error-log', component: Layout, redirect: 'noredirect', - name: 'errlog', - icon: 'bug', - noDropdown: true, - children: [{ path: 'log', component: _import('errlog/index'), name: '错误日志' }] + children: [{ path: 'log', component: _import('errlog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}] }, + { path: '/excel', component: Layout, redirect: '/excel/download', name: 'excel', - icon: 'excel', + meta: { + title: 'excel', + icon: 'excel' + }, children: [ - { path: 'download', component: _import('excel/index'), name: 'export excel' }, - { path: 'download2', component: _import('excel/selectExcel'), name: 'export selected' }, - { path: 'upload', component: _import('excel/uploadExcel'), name: 'upload excel' } + { path: 'export-excel', component: _import('excel/index'), name: 'exportExcel', meta: { title: 'export excel' }}, + { path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected' }}, + { path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel' }} ] }, + { path: '/zip', component: Layout, redirect: '/zip/download', - name: 'zip', - icon: 'zip', - children: [ - { path: 'download', component: _import('zip/index'), name: 'export zip' } - ] + children: [{ path: 'download', component: _import('zip/index'), name: 'exportZip', meta: { title: 'zip', icon: 'zip' }}] }, + { path: '/theme', component: Layout, redirect: 'noredirect', - name: 'theme', - icon: 'theme', - noDropdown: true, - children: [{ path: 'index', component: _import('theme/index'), name: '换肤' }] + children: [{ path: 'index', component: _import('theme/index'), name: 'theme', meta: { title: '换肤', icon: 'theme' }}] }, + { path: '/clipboard', component: Layout, redirect: 'noredirect', - icon: 'clipboard', - noDropdown: true, - children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard' }] + children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard', meta: { title: 'clipboard', icon: 'clipboard' }}] }, { path: '*', redirect: '/404', hidden: true } diff --git a/src/views/layout/components/Levelbar.vue b/src/views/layout/components/Levelbar.vue index e162a663..85c6995b 100644 --- a/src/views/layout/components/Levelbar.vue +++ b/src/views/layout/components/Levelbar.vue @@ -1,8 +1,8 @@ @@ -22,7 +22,7 @@ export default { let matched = this.$route.matched.filter(item => item.name) const first = matched[0] if (first && (first.name !== '首页' || first.path !== '')) { - matched = [{ name: '首页', path: '/' }].concat(matched) + matched = [{ path: '/', meta: { title: '首页' }}].concat(matched) } this.levelList = matched } diff --git a/src/views/layout/components/SidebarItem.vue b/src/views/layout/components/SidebarItem.vue index 63bdf44e..c92835c8 100644 --- a/src/views/layout/components/SidebarItem.vue +++ b/src/views/layout/components/SidebarItem.vue @@ -2,28 +2,30 @@