vue路由模块化配置

优点

路由如若不区分模块化配置，所有路由挤在同一个文件将不好维护，所以路由的配置也要模块化

在main.js里注册

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

模块拆分

配置 modules 里面模块路由

teacherRouter .js

const teacherRouter = [
    {
        path: '/teacher',
        name: 'Teacher',
        // meta: {teacher: true},
        component: () => import('@/views/Teacher.vue'),
        children: [
          {
            path: 'home',
            name: 'TeacherHome',
            meta: {teacher: true},
            component: () => import('@/views/TeacherHome.vue'),
          },
          {
            path: 'message',
            name: 'TeacherMessage',
            // meta: {teacher: true},
            component: () => import('@/views/TeacherMessage.vue'),
          },
          {
            path: 'circle',
            name: 'TeacherCircle',
            meta: {teacher: true},
            component: () => import('@/views/TeacherCircle.vue'),
          },
          {
            path: 'index',
            name: 'TeacherIndex',
            // meta: {teacher: true},
            component: () => import('@/views/TeacherIndex.vue'),
          },
          {
            path: 'knowledge',
            name: 'HealthKnowledge',
            // meta: {teacher: true},
            component: () => import('@/views/HealthKnowledgeList.vue'),
          },
          {
            path: 'nutritioncheck',
            name: 'NutritionQuickCheck',
            // meta: {teacher: true},
            component: () => import('@/views/NutritionQuickCheck.vue'),
          },
          {
            path: 'mentalhealth',
            name: 'MentalHealthList',
            // meta: {teacher: true},
            component: () => import('@/views/MentalHealthList.vue'),
          },
        ]
      },

      {
        path: '/studentreportList',
        name: 'StudentReportList',
        // meta: {teacher: true},
        component: () => import('@/views/StudentReportList.vue')
      },

      {
        path: '/mentalFileList',
        name: 'MentalFileList',
        meta: {teacher: true},
        component: () => import('@/views/MentalFileList.vue')
      },
      {
        path: '/mentalFilePerson',
        name: 'MentalFilePerson',
        // meta: {teacher: true},
        component: () => import('@/views/MentalFilePerson.vue')
      },
      {
        path: '/mentalFilePersonResult',
        name: 'MentalFilePersonResult',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/MentalFilePersonResult.vue')
      },

      {
        path: '/studentattendanceList',
        name: 'StudentAttendanceList',
        // meta: {teacher: true, student: true},
        component: () => import('@/views/StudentAttendanceList.vue')
      },

      {
        path: '/knowledgepublish',
        name: 'KnowledgePublish',
        meta: {auth: true},
        component: () => import('@/views/KnowledgePublish.vue'),
      },
      {
        path: '/knowledgepublishAdd',
        name: 'KnowledgePublishAdd',
        meta: {auth: true},
        component: () => import('@/views/KnowledgePublishAdd.vue'),
      },
      {
        path: '/knowledgeview',
        name: 'KnowledgeView',
        meta: {auth: true},
        component: () => import('@/views/KnowledgeView.vue'),
      },
      {
        path: '/knowledgePublishDetail/:id',
        name: 'KnowledgePublishDetail',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/KnowledgePublishDetail.vue')
      },
      {
        path: '/knowledgemodify/:id',
        name: 'KnowledgeModify',
        meta: {auth: true},
        props: true,
        component: () => import('@/views/KnowledgeModify.vue'),
      },
      {
        path: '/knowledgefix/:id',
        name: 'KnowledgeFix',
        meta: {auth: true},
        props: true,
        component: () => import('@/views/KnowledgeFix.vue'),
      },

      {
        path: '/messagecomment',
        name: 'MessageComment',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/MessageComment.vue')
      },

      {
        path: '/addInformation',
        name: 'AddInformation',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/AddInformation.vue')
      },
      {
        path: '/editInformation',
        name: 'EditInformation',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/EditInformation.vue')
      },
      
]

export default teacherRouter

studentRouter.js

const studentRoutes = [
  {
    path: '/student',
    name: 'Student',
    // meta: {student: true},
    component: () => import('@/views/Student.vue'),
    children: [
      {
        path: 'home',
        name: 'StudentHome',
        meta: {student: true},
        component: () => import('@/views/StudentHome.vue'),
      },
      {
        path: 'message',
        name: 'StudentMessage',
        // meta: {student: true},
        component: () => import('@/views/StudentMessage.vue'),
      },
      {
        path: 'circle',
        name: 'StudentCircle',
        meta: {student: true},
        component: () => import('@/views/StudentCircle.vue'),
      },
      {
        path: 'index',
        name: 'StudentIndex',
        // meta: {student: true},
        component: () => import('@/views/StudentIndex.vue'),
      },
      {
        path: 'knowledge',
        name: 'HealthKnowledge',
        // meta: {student: true},
        component: () => import('@/views/HealthKnowledgeList.vue'),
      },
      {
        path: 'nutritioncheck',
        name: 'NutritionQuickCheck',
        // meta: {student: true},
        component: () => import('@/views/NutritionQuickCheck.vue'),
      },
      {
        path: 'mentalhealth',
        name: 'MentalHealthList',
        // meta: {student: true},
        component: () => import('@/views/MentalHealthList.vue'),
      },
    ]
  },
  {
    path: '/studentreport',
    name: 'StudentReport',
    // meta: {student: true},
    component: () => import('@/views/StudentReport.vue')
  },
  {
    path: '/studentreportdetail/:id',
    name: 'StudentReportDetail',
    // meta: {student: true},
    props: true,
    component: () => import('@/views/StudentReportDetail.vue')
  },
  {
    path: '/studentattendance',
    name: 'StudentAttendance',
    meta: {student: true},
    component: () => import('@/views/StudentAttendance.vue')
  },
  {
    path: '/studentrecipes',
    name: 'StudentRecipes',
    meta: {student: true, teacher: true},
    component: () => import('@/views/StudentRecipes.vue')
  },
  {
    path: '/studentinfomation/:id',
    name: 'StudentInfomation',
    meta: {student: true},
    props: true,
    component: ()=> import('@/views/StudentInfomation.vue')
  },
  {
    path: '/studentinfomodify/:id',
    name: 'StudentInfoModify',
    meta: {student: true},
    props: true,
    component: ()=> import('@/views/StudentInfoModify.vue')
  },
  {
    path: '/studentfamilyusers/:id',
    name: 'StudentFamilyUsers',
    meta: {student: true},
    props: true,
    component: ()=> import('@/views/StudentFamilyUsers.vue')
  },
  {
    path: '/homebannerinfo',
    name: 'HomeBannerInfo',
    component: ()=> import('@/views/HomeBannerInfo.vue')
  },
  
]

export default studentRoutes

commonRouter.js

const commonRouter = [
    {
        path: '/classdirectory',
        name: 'ClassDirectory',
        // meta: {teacher: true, student: true},
        component: () => import('@/views/ClassDirectory.vue')
      },
      {
        path: '/growthrecord/:id',
        name: 'GrowthRecord',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/GrowthRecord.vue')
      },
      {
        path: '/releasegrowthrecord/:id',
        name: 'ReleaseGrowthRecord',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/ReleaseGrowthRecord.vue')
      },
      {
        path: '/knowledgedetail/:id',
        name: 'KnowledgeDetail',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/HealthKnowledgeDetail.vue')
      },
      {
        path: '/knowledgecomment/:id',
        name: 'KnowledgeComment',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/HealthKnowledgeComment.vue')
      },
      {
        path: '/nutritionquickcheckdetal/:id',
        name: 'NutritionQuickCheckDetal',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/NutritionQuickCheckDetal.vue')
      },
      {
        path: '/mentalhealthdetal/:id',
        name: 'MentalHealthDetal',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/MentalHealthDetal.vue')
      },
      {
        path: '/mentalhealthtest/:id',
        name: 'MentalHealthTest',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/MentalHealthTest.vue')
      },
      {
        path: '/mentalhealthresult/:id',
        name: 'MentalHealthResult',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/MentalHealthResult.vue')
      },
      {
        path: '/questionsandanswersdetal/:id',
        name: 'QuestionsAndAnswersDetal',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/QuestionsAndAnswersDetal.vue')
      },
      {
        path: '/questionsandanswersquiz',
        name: 'QuestionsAndAnswersQuiz',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/QuestionsAndAnswersQuiz.vue')
      },
      {
        path: '/messagesystem',
        name: 'MessageSystem',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/MessageSystem.vue')
      },
      {
        path: '/messagesystemdetail/:id',
        name: 'MessageSystemDetail',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/MessageSystemDetail.vue')
      },
      {
        path: '/messagecircle',
        name: 'MessageCircle',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/MessageCircle.vue')
      },
      {
        path: '/messagecircledetail/:id',
        name: 'MessageCircleDetail',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/MessageCircleDetail.vue')
      },
      {
        path: '/messageanswers',
        name: 'MessageAnswers',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/MessageAnswers.vue')
      },
      {
        path: '/messageliked',
        name: 'MessageLiked',
        // meta: {teacher: true, student: true},
        // props: true,
        component: () => import('@/views/MessageLiked.vue')
      },
      {
        path: '/setinformation/:id',
        name: 'SetInformation',
        // meta: {teacher: true, student: true},
        props: true,
        component: () => import('@/views/SetInformation.vue')
      },
      
]

export default commonRouter

关键是路由配置入口出口文件 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import store from '../store'
import {toLoginStudent, toLoginTeacher} from './routerMethods'
import studentRouter from './module/studentRouter'
import teacherRouter from './module/teacherRouter'
import commonRouter from './module/commonRouter'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/student/index'
  },
  {
    path: '/login/:role',
    name: 'Login',
    component: Login,
    props: true,
  },
  ...studentRouter,
  ...teacherRouter,
  ...commonRouter,
  {
    path: '/about',
    name: 'About',
    // meta: {teacher: true, student: true},
    component: () => import('@/views/About.vue')
  },
  {
    path: '/feedback',
    name: 'FeedBack',
    // meta: {teacher: true, student: true},
    component: () => import('@/views/FeedBack.vue')
  },
  {
    path: '/*',
    name: 'Err',
    component: () => import('@/views/Err.vue')
  },

]

const router = new VueRouter({
  base: process.env.BASE_URL,
  // mode:'history',
  routes
})

router.beforeEach( (to, from, next) => {
  if(to.meta.student && !to.meta.teacher){
    toLoginStudent(to, from, next);
  }else if(to.meta.teacher && !to.meta.student){
    toLoginTeacher(to, from, next);
  }else if(to.meta.teacher && to.meta.student){
    if(store.state.login.role=='teacher'){
      toLoginTeacher(to, from, next);
    }else if(store.state.login.role=='student'){
      toLoginStudent(to, from, next);
    }else{
      toLoginStudent(to, from, next);
    }
  }else{
    next();
  }
})

export default router