项目构建完成后，我们在对目录进行调整。把页面的骨架搭建起来。就是把前面构建的项目中，菜单规划一下，菜单点击后可以打开正常的页面。恩，顺便把登录的页面效果也做一做。
这个工程中有两个项目，两边的知识点基本相同。这里都以后台的修改为例，前台类似。
修改后台路由
先规划下后台的路由，在@/project/admin/router/下建个文件：routers.js。把路由的配置提取出来。
import index from 'admin/pages/index'
const routers = [{
path: '/',
name: 'index',
text: '管理台',
redirect: '/hello',
component: index,
children: [{
path: '/hello',
name: 'hello',
text: '示例',
component: function (resolve) {
require(['admin/pages/HelloWorld'], resolve)
}
}]
}]
export default routers
修改index.js成如下
import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
Vue.use(Router)
const router = new Router({
routes: routers
})
export default router
前台也做同样的修改。
修改完成后，效果没有变化。后面路由配置都可以在routers.js文件中进行，这里不涉及到业务，都是些配置的东东。
规划路由
补充routers.js，把规划的菜单（菜单是通过路由生成的）。path: '/'这个路由是项目的根，它指向layout的布局组件。项目中所有的页面都是它的children。菜单是由这个children中的内容生成的。
把routers.js内容调整下，既然已经开始项目了，HelloWorld就不用了，也不删除它，留着作为创建文件时复制基础内容用。
import index from 'index/pages/index'
const routers = [{
path: '/',
name: 'index',
text: '首页',
redirect: '/hello',
component: index,
children: [{
path: '/dashboard',
name: 'dashboard',
text: '仪表盘',
menu: true,
icon: 'fas fa-tachometer-alt',
component: function (resolve) {
require(['index/pages/Dashboard'], resolve)
}
}]
}]
export default routers
修改index.vue，使菜单根据routers生成。
<script>
import HuipLayout from '@/components/HuipLayout'
import routers from 'admin/router/routers'
export default {
name: 'AdminMain',
components: {
HuipLayout
},
data () {
return {
defaultLogo: require('@/assets/logo.png'),
user: {
name: 'admin'
},
tips: [{
text: '首页',
name: 'index',
url: '/index.html'
}],
vmenus: routers[0]['children']
}
}
}
</script>
现在效果如下，菜单是routers自动生成的。
效果
暂时先如下配置
import index from 'admin/pages/index'
const Wrap = { template: '<router-view></router-view>' }
const routers = [{
path: '/',
name: 'index',
text: '管理台',
redirect: '/dashboard',
component: index,
children: [{
path: '/dashboard',
name: 'dashboard',
text: '仪表盘',
menu: true,
icon: 'fas fa-tachometer-alt',
component: function (resolve) {
require(['admin/pages/Dashboard'], resolve)
}
}, {
path: '/user',
name: 'user',
text: '用户管理',
menu: true,
icon: 'fas fa-user-cog',
component: Wrap,
hasChildren: true,
children: [{
path: '/user/client',
name: 'user_client',
text: '客户端管理',
menu: true,
component: function (resolve) {
require(['admin/pages/user/client'], resolve)
}
}, {
path: '/user/org',
name: 'user_org',
text: '组织机构',
menu: true,
component: Wrap,
hasChildren: true,
children: [{
path: '/user/org/org',
name: 'user_org_org',
text: '组织机构',
menu: true,
component: function (resolve) {
require(['admin/pages/user/org'], resolve)
}
}, {
path: '/user/org/type',
name: 'user_org_type',
text: '组织类型',
menu: true,
component: function (resolve) {
require(['admin/pages/user/orgType'], resolve)
}
}]
}, {
path: '/user/role',
name: 'user_role',
text: '角色管理',
menu: true,
component: function (resolve) {
require(['admin/pages/user/role'], resolve)
}
}, {
path: '/user/auth',
name: 'user_auth',
text: '权限管理',
menu: true,
component: function (resolve) {
require(['admin/pages/user/auth'], resolve)
}
}]
}, {
path: '/dictionary',
name: 'dictionary',
text: '数据仓库',
menu: true,
icon: 'fas fa-database',
component: Wrap,
hasChildren: true,
children: [{
path: '/dictionary/diagnosis',
name: 'dictionary_diagnosis',
text: '诊断库',
menu: true,
component: function (resolve) {
require(['admin/pages/dictionary/diagnosis'], resolve)
}
}, {
path: '/dictionary/operating',
name: 'dictionary_operating',
text: '术式库',
menu: true,
component: function (resolve) {
require(['admin/pages/dictionary/operating'], resolve)
}
}, {
path: '/dictionary/subject',
name: 'dictionary_subject',
text: '学科',
menu: true,
component: function (resolve) {
require(['admin/pages/dictionary/subject'], resolve)
}
}, {
path: '/dictionary/part',
name: 'dictionary_part',
text: '人体部位',
menu: true,
component: function (resolve) {
require(['admin/pages/dictionary/part'], resolve)
}
}, {
path: '/dictionary/symptom',
name: 'dictionary_symptom',
text: '症状管理',
menu: true,
component: function (resolve) {
require(['admin/pages/dictionary/symptom'], resolve)
}
}]
}, {
path: '/message',
name: 'message',
text: '消息管理',
menu: true,
icon: 'far fa-envelope',
component: Wrap,
hasChildren: true,
children: [{
path: '/message/type',
name: 'message_type',
text: '消息分类',
menu: true,
component: function (resolve) {
require(['admin/pages/message/type'], resolve)
}
}, {
path: '/message/list',
name: 'message_list',
text: '消息列表',
menu: true,
component: function (resolve) {
require(['admin/pages/message/list'], resolve)
}
}]
}]
}]
export default routers
界面效果
后台
前台
登录
总结
到此，完成了通过路由生成菜单，页面之间的导航。
git地址：https://gitee.com/biboheart/huip-vue.git
