持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

官方资料：

router.vuejs.org/zh/guide/ad…

路由懒加载和非懒加载的差别：

1、在项目中切换路由，明显可以看到，非懒加载只有在初次切换路由时加载所有的路由js文件，懒加载每次切换路由会加载新的js。（切换相同路由使用缓存不算）

2、打包项目后可见，非懒加载所有路由相关js都打包在0*.js文件中了，路由懒加载多出很多js，从原来0*.js文件中抽离出来，导致明显0*.js文件体积减小。

具体路由懒加载代码如下：

import homeRouter from './home'

let routerArray = [...homeRouter]

export default new VueRouter({
  linkActiveClass: 'on',
  mode: 'history',
  routes: routerArray
})

复制代码

const Home = resolve => require(['../../components/home'], resolve)
const Index = resolve => require(['../../components/view/index'], resolve)
const User = resolve => require(['../../components/view/user'], resolve)

let homeRouter = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    redirect: '/index',
    meta: {
      requiredAuth: true
    },
    children: [
      {
        name: 'index',
        path: '/index',
        component: Index
      },
      {
        name: 'user',
        path: '/user',
        component: User
      }
    ]
  }
]

export default homeRouter

复制代码

注意：

当使用动态路由，即便写法同懒加载，但始终是非懒加载的形式，类似代码如下：

const Com = resolve => require([`../../components/view/${element.url}`], resolve)
routeArray[0].children.push({
  name: element.url.replace('/', ''),
  path: '/' + element.url,
  component: Com
})
router.addRoutes(routeArray)
复制代码

思考，大致是因为js执行[../../components/view/${element.url}]时就已经引入了吧。

疑惑

使用动态路由，目的是在配置菜单的时候，只需要在界面操作，无需修改前端代码。

但是：

• 1、新增路由，前端没有代码也没用呀。
• 2、且配置的时候url仍然需要和前端的文件夹名字一致。那为什么不在前端直接写死呢，然后在界面操作配置相同的名字呢。

总之：

我已经开始疑惑为什么要搞动态路由了，当初谁让我弄的啊？？？