哥们儿们,最近新鲜事多吗?咱来聊聊怎么用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;
网友评论