Vue神器，速度快如闪电！路由懒加载教程大揭秘

听说过吗？ Vue应用中有个叫做“路由懒加载”的神奇功能，用上它就能让应用运行速度快如闪电！感觉好兴奋！

什么叫做路由懒加载？简单来说就是好比你只拿你需要的东西出门一样，只有在用到了某些代码或组件时，它才会被加载出来。这样不仅能减轻一口气把所有负担背上的压力，还能明显降低应用程序的启动速度，让大家用起来更称心如意

想要你的Vue app速度快点不？弄个Vue-router小插件，是官网推荐哒！

接下来，我们要在 Vue 里搞下路由懒加载~这玩意儿简单得很，在于在 router 那里添加点内容就搞定啦!你知道吗？这里的代码里，用import()神奇函数把Foo和Bar这俩小伙伴导入进来，直接给它们起了个名叫const变量。千万不要小看import()这个黑科技，webpack的小助手，让每个组件独立运行，方便管理！

npm install vue-router --save

完工，搞定组件安装后，只要轻轻点几下路由选项就可以使用新的功能了，是不是超简单？

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')
const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})
new Vue({
  router
}).$mount('#app')

别急当然还没完！Vue-Router 可不只是拆解代码这么简单它还有好几个厉害功能等你来发现。利用它们，你可以灵活应对代码拆分，让你的加载速度飞起来！

咱们说下 vuerouter 的懒加载功能，真是不错，能加快应用速度。而且人家也用 webpack 切分了代码。对了，vuerouter 还有很多选择，能轻松搞定代码切割。

今天咱就聊到这儿了！学到啥就说出来，别忘了给我回个信息~觉得好的话，也赶紧分享给你的伙伴们刚刚我们讨论了怎样运用Vue-Router在Vue应用中巧妙地加载路由，这样做不仅新颖还能高效利用资源此外，Vue-Router还有好多实用的工具，比如设置选项，让代码更轻松地被解析。说说看大家都喜欢什么部分，有啥想知道的问题都可以随时问我！记得点赞、留言，或者分享给你的朋友们

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
  mode: 'history',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  beforeEach: (to, from, next) => {},
  afterEach: (to, from) => {}
})