vue路由按功能拆分成多个文件的方式

如果一个Vue项目比较大，开发人员也多的情况下，如果一个路由文件都放在一起，不利用协同开发，容易引起冲突

Vue的脚手架默认搭好后，路由文件是在src/router/index.js里面，里面包含了所有的路由信息，我们可以对整个项目进行梳理，按照逻辑功能模块进行拆分，比如拆一个消息（message）模块，相关的路由我们都建立在src/router/message.js:

const routers = [
  {
    path: '/message/home',
    name: 'messageHome',
    title: '消息首页',
    component: () => import('@/views/message/Home.vue')
  },
 // 其他路由继续写
]

export default routers

那么整个系统要怎么样才能识别messae.js这里的路由呢？我们可以把这些路由信息引入到src/router/index.js里面

来看下src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

// 消息模块的routers
import messageRouters from '@/router/message'

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/Login.vue'),
        meta: {publicView: true}
    },
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home'),
        meta: {fn: '0'}
    },
 //其他首页的路由继续写
]

routers.push(...pxxxRouters);//把消息模块的路由也加进来
const router = new VueRouter({
    routes
});

export default router

这样整个系统的多文件路由就完美整合好了！