vue-router可以进行模块拆分吗?就像vuex的模块化拆分一样。

在路由非常多的情况下,如何对路由进行模块拆分?

比如有100个路由,我想将这100个路由分成A,B,C,D,E,五组放在a.js, b.js, c.js, d.js, e.js五个分路由文件中,每个文件只写20个路由,然后通过一个总的router.js将这5个分路由整合成一个。

回答:

LZ要的代码结构放在router文件夹下

#arouter.js

import a from 'components/a'
export default{
  path: '/a',
  component: a
}
#index.js

import Vue from 'vue'
import Router from 'vue-router'
import arouter from './arouter'
Vue.use(Router)

export default new Router({
  routes: [
    arouter
  ]
})

回答:

#/user/home.js
export default {
    name: 'User/index',
    path: '/user',
    meta: {
        title: '个人中心'
    },
    component: r => require.ensure([], () => r(require('../views/user/index')), 'User')
}
#/user/message.js
export default {
    name: 'user/message',
    path: '/user/message',
    meta: {
        title: '消息'
    },
    component: r => require.ensure([], () => r(require('../views/user/message')), 'User')
}
#/user/test.js
export default {
    name: 'user/test',
    path: '/user/test',
    meta: {
        title: 'test'
    },
    component: r => require.ensure([], () => r(require('../views/user/test')), 'User')
}
#/user/index.js

import Index from './home'
import Message from './message'
import Test from './test'

export default [
    Index,
    Message,
    Test
]
#index.js

import Vue from 'vue'
import Router from 'vue-router'

import User from './user'

Vue.use(Router)

export default new Router({
  routes: [
    ...User 
  ]
})

回答:

可以啊,不就是五个数组放到五个文件,最后合并起来

回答:

@LikeDege ,这个要怎么实现呢?可不可以举个例子

回答:

可以把路径放在不同的文件夹里,比如:

// src/router/index.js
export default router = new Router({
    routes: [
        require('../routes/A'),
        require('../routes/B'),
        ...
    ]
})

src下创建新文件夹routes, 这个文件夹再创建A,B,C,D,E文件夹,在特定的页面模块,比如说A:

// src/routes/A/index.js
const PageA = resolve => require(['./components/PageA.vue'], resolve)
const PageADetail = resolve => require(['./components/PageADetail.vue'], resolve)

module.exports = {
  path: '/pageA',
  component: PageA,
  children: [
    {
        path: 'detail',
        component: PageADetail
    },
    ...
  ]
}

说到底,routes需要传入一个数组,至于这个数组里面,是合法的route对象即可。也就是说,这个对象我可以require一个模块来充当。至于你怎么组织这些模块,你觉得怎样方便怎样来就行。

回答:

a.js b.js 等内部用export导出,在router.js中import这些路由模块js,在routes:[]数组中使用扩展运算符引入这些路由模块

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注