Vue-Router懒加载大揭秘！速看异步组件神器

哥们儿们，最近新鲜事多吗？咱来聊聊怎么用Vue-Router做个懒加载吧～速来围观

现在的网页设计真不赖！但这可不止是好看那么简单，连性能也得特别棒才行！比如用到那个叫“路由懒加载”的技巧，一开始浏览网页时，浏览器并不是立马把所有代码都下载下来，只有你用到的时候才会加载哟。那这个方法到底好在哪里？

咱可别瞧不起Vue Router它里面有个超酷功能叫做“异步组件”，用这个功能，你都能轻松搞定懒加载路由，网页打开速度让人惊艳不止！快抓住这个好帮手学一下！

咱们说说什么是”路由懒加载”呗。想像一下你去买衣服，怎么会刚看到店铺就立马掏钱？这个措施能加快我们网上浏览速度，使网页操作起来更顺畅，该懂了？

想要让Vue的路由懒加载更加炫酷?试试异步组件这个新玩意儿!只需将路由设成一个能返回Promise的函数,然后在里面塞上你要加载的组件就行了。看个简单的例子:

首先呐，咱得整一个能延迟加载又心情愉快的异步组件。大概两种方法，要不就用Webpack里的require.ensure厉害货，要不就用ES6的import神器也行！咋整？今天咱就要动手创建一个赞到炸裂的“首页”异步组件咯~

const Home = () => import('./components/Home.vue');

咱马上就把异步组件放在路由里运行！记得在设置过程中，把component选项设定为能帮咱们呈现异步组件的那段函数。上图就是个简易版的route设定例子，快来看看吧～

搞定了哦～Vue-Router里面的路由懒加载真心好用！加载组件数据就跟玩飞车一样，嗖地一下就搞定！别忘了用Webpack的代码分割和Vue-Loader插件之前不是教过你们如何用异步组件轻松实现路由懒加载吗？还附有实战操作！用这款神奇工具，不管你是搞网站建设还是开发APP，甚至其他项目，都能让网页变得好轻薄，速度飞快！想了解更多关于Vue-Router和异步组件的内容吗？赶紧把这篇文章读完，评分、点个赞分享给朋友！

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('./components/Home.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('./components/About.vue'),
  },
  // 其他路由配置...
];
const router = new VueRouter({
  routes,
  mode: 'hash',
});
export default router;