将 vue 路由拆分到多个文件

最新推荐文章于 2024-07-13 23:14:23 发布

Zero-To-One

最新推荐文章于 2024-07-13 23:14:23 发布

阅读量952

点赞数

分类专栏： # vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_37580383/article/details/121115973

版权

vue2 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种Vue项目中通过将路由配置拆分成多个文件来提高代码可读性和可维护性的方法。通过示例展示了如何定义和引入不同业务模块的路由配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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