对于稍微复杂点的项目，所有路由都混在一个页面，看着也很混乱，不清晰。
所以按业务，就需要划分为多个路由文件

 index.js 的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'// 引入其他路由文件
import ManagementRoutes from '@/router/management'
import ServiceRoutes from '@/router/service'const baseRoutes = [{ path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }
]const routes = baseRoutes.concat(ManagementRoutes, ServiceRoutes)Vue.use(VueRouter)const router = new VueRouter({// mode: 'history',routes
})export default router

其他文件代码:
 

/** @Author: Jonathan* @Date: 2021-09-16 14:26:05* @LastEditors: Jonathan* @LastEditTime: 2021-11-03 10:34:43* @Descripttion:后台路由* @FilePath: \simplify-fkyun-ui\src\router\management.js* @version:1.0.0*/
import AppManage from '@/views/management/applicationManage/AppManage.vue'const routes = [{path: '/',name: 'Main',component: () => import('@/views/Main.vue'),redirect: '/home', // 将Main主页到重定向到路由home页(就是访问Main其实是访问home)children: [// { path: '/home', name: 'Home', component: () => import('../views/service/bigscreenInfo/BigScreenConfig.vue') }, // Home是Main子路由{ path: '/home', name: 'Home', component: () => import('../views/Home.vue') }, // Home是Main子路由// 应用管理-应用主页{ path: 'management/applicationManage/appManage', name: 'AppManage', component: AppManage }]}
]export default routes