VUE中对路由文件的拆分

vue路由是vue中非常重要的一部分，可是当写项目时路由是非常多的，当项目很大时，全部写在index文件中检查起来会非常麻烦，这个时候就需要对index文件中的路由进行拆分！

下面以一个学生的管理系统为例，有学生用户，老师用户，管理员：

 如果只是简单的几个路由，跳转不多，这样写确实没毛病，可是一旦有个组件的路由跳转非常多，如管理员的路由跳转：

 {
    path: '/admin',
    component: () =>
        import ('@/pages/teacher/Index'),
    children: [{
            path: '',
            meta: {
                title: '后台管理首页',
            }
        },
        {
            path: 'userLiset',
            component: () =>
                import ('@/pages/teacher/UserList'),
            meta: {
                title: '信息表一',
                mess: '信息表'
            }
        },
        {
            path: 'haha',
            component: () =>
                import ('@/pages/teacher/Haha'),
            meta: {
                title: '信息表2',
                mess: '信息表'
            }
        },
        {
            path: 'houseList',
            component: () =>
                import ('@/pages/teacher/home/HouseList'),
            meta: {
                title: '仓库一',
                mess: '数据仓库'
            }
        },
    ]
}

要是像这样的再多几个，那页面代码就非常的繁琐，修改起来也很麻烦，这个时候就可以把每个文件拆分，例如这里，把学生、老师、管理员三个角色需要的代码单独写出去：

建立routes文件夹

 拿学生用户的路由跳转来说，建立单独的路由文件：

 这时的index.js文件中：

 三个都拆分后再写入index.js文件则如图所示：