Vue实例:医院统一信息平台(调整路由)

项目构建完成后，我们在对目录进行调整。把页面的骨架搭建起来。就是把前面构建的项目中，菜单规划一下，菜单点击后可以打开正常的页面。恩，顺便把登录的页面效果也做一做。
这个工程中有两个项目，两边的知识点基本相同。这里都以后台的修改为例，前台类似。

修改后台路由

先规划下后台的路由，在@/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