项目分析三

一、路由页面整理

// 在src/router/index.js中删除多余的静态路由，后续再慢慢添加
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

二、新建模块的页面

// 进入到src/views文件夹中，cmd打开终端，快带新建文件夹
mkdir departments employees setting salarys social attendances approvals permission
// 在每个文件夹里创建index.vue文件，文件内容如下：
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        员工 //根据不同的文件，填写不同的内容
      </h2>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

三、建立每个模块的路由规则

// 根据上面建立好的文件配置对应的路由规则，在src/router中创建modules文件夹
// 进入modules文件夹中，打开 git 终端，输入命令，快速创建
touch departments.js employees.js settings.js salarys.js socials.js attendances.js approvals.js permissions.js
// 设置每个模块的路由规则,修改的部分对应着src/views里创建的文件

import Layout from '@/layout'

export default {
  path: '/employees', // 对应着修改路径名
  name: 'employees', // 对应着修改路由名
  component: Layout,
  // 配置二级路的路由表
  children: [{
    path: '', 
    component: () => import('@/views/employees'),// 对应着修改路径名
    meta: {
      title: '员工管理' // 对应着修改菜单名称
    }
  }]
}