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

2021-09-25 1400点热度 0人点赞 0条评论

如果一个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

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

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论