《和小米一起学Vue.js》— 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的【动态导入】，这意味着你可以用动态导入代替静态导入：

const UserView=()=> import('../views/User.vue')

const routes = [
 {
    path: '/about',
    name: 'about',
    //动态导入(默认方式)
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/user/:uid',   //对应的网址路径
    name: 'user',         //对应的路由名称
    //动态导入(推荐方式)
    component: UserView
  }
]

TIP：使用动态导入的时候，就无需在文件开头使用 import 静态导入了。

代码下载

下载地址：  密码：8zxs