懒加载路由的背景
听说了没？现在好多人都喜欢用单页应用（SPA）！特别是用Vue.js做的，那个Vue Router真的很好用！它可以帮我们搞定路由映射，把页面调节得妥妥的，还挺稳当的，容易维护。不过，要是应用变复杂了，路由加载和解析可是个难题。但放心，Vue Router也有懒加载路由的功能，就是等到真正用到的时候再去加载的。
Lazy-loading技术的优势
慢点儿下载超好用，有时候咱们也不急着掏空小硬盘堆东西。对大站或玩游戏来说，这招真管用！把文件分成几块，真要用时候再慢慢往下拉，不怕突然卡住中断。
动态导入实现懒加载
在VueRouter中，咱们能用动态导入来偷懒加载~这可是ES6提供的新把戏呢。用这种方式，就可以在要用到时再加载相应的模块。比如，咱们把每个路由对应的组件写成分支函数，然后让函数返回一个import() Promise。这个Promise在解析完后，会自己帮咱们加载对应的组件噢！
基本懒加载路由示例
咱们举个简单点的栗子，比如说首页（Home）和关于我们的页面(About)，教你们怎么搞懒加载路由。
javascript "Home这个组件就能搞定主页，加载它就行了。" 你只需把About这部分替换成`./components/About.vue`就搞定！
const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
这儿，我们用了一个叫做import()的东东，想用哪部分功能就把它拉进来。所以说，看到这个链接按钮，点进去就能直接看到Home and About两个界面
高级懒加载方式：异步组件
你知道吗，Vue Router还有一个超级厉害的特性，叫做异步组件！它不像普通的懒加载那样直接出现，而是当你真的要用到这个组件时再慢慢加载出来。
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
});
异步组件示例
这儿有一个Post页面，利用了AJAX技术从服务器获取数据哟。由于Post有点小懒惰，需要用的时候再慢悠悠打开和显现出来哦：
const Post =()=>({
组件就直接从那个叫做Post的文件夹里拿呗。
loading: LoadingComponent,
error: ErrorComponent,
const Post = () => ({
component: import('./components/Post.vue'),
loading: LoadingComponent,
error: ErrorComponent,
delay: 200,
timeout: 3000
});
delay: 200,//毫秒
timeout: 3000,//毫秒
});
这部分代码里的 Post 就是咱们做饭的大厨，给材料和调料都准备好了，然后就能做出好吃的饭菜了！它弄出来一个调料列表，指导网站把动态部分加载演示出来。Deck 这个东西，就像是我们在餐馆点菜时候喊出口的那道菜名，让 Post 知道我们要用哪个部件嘛；而 Loading 就是那个让我们等待的小闹钟，让 Post 猜到要多久才会有完全展示；Erro r 就是个小助手，让 Post 知道万一碰到啥问题怎么办；到了最后，Late 就像是你的那碗热茶，让 Post 知道你能等多久才能看到结果。
const router = new VueRouter({
routes: [
{
path: '/post/:id',
component: Post
}
]
});
总结与展望
看完这篇文章，你就能学会如何用懒加载这项技巧使Vue Router的单页应用更流畅。这么做的话，用户体验当然提升。现在的前端技术正在变得越来越好，懒加载的使用也会越来越普遍。希望这篇文章能对你理解和更好地利用Vue Router的懒加载路由功能有所帮助。
评论0