# # 推荐-Vue-Router写法

使用路由懒加载，实现方式是结合Vue异步组件和Webpack代码分割功能。

优点：

减小包体积，提高加载速度
当页面>20个时，组件定义需要拉到编辑器顶部才知道具体路径

# # bad

    import IntentionList from '@/pages/intention/list'
    import Variable from '@/pages/variable'
    ...
    
    {
        path: '/intention/list',
        name: 'ilist',
        component: IntentionList
    },
    {
        path: '/variable',
        name: 'variable',
        component: Variable
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# # good

    {
        path: '/intention/list',
        name: 'ilist',
        component: () => import('@/pages/intention/list')
    },
    {
        path: '/variable',
        name: 'variable',
        component: () => import('@/pages/variable')
    }

1
2
3
4
5
6
7
8
9
10
11

import语法需要Babel添加syntax-dynamic-import插件。最新当vue-cli 3.0中默认添加该特性，不需要额外引用。另外，合理控制异步模块的数量。

编辑

← 推荐-Vue项目目录结构 Axios用法与原理→