Vue路由懒加载，网页加载飞起

Vue中路由懒加载的重要性

哈喽！今天说说Vue里面超酷的一个功能——路由懒加载，这个可是能让网页加载飞起！想要小伙伴们在你的Vue项目里爽快又飞快地逛起来？那就快点学会怎么用路由懒加载！

什么是路由懒加载

别急，我先把啥叫“路由懒加载”给你解释清楚！简单说，这种方法就是等到你真的要用到那部分网页信息时再去加载，也不用让整个页面全下下来。这样的话，你点击某个网站链接后，就可以直接看到自己想看的东西，不必等所有资料都下载完再慢慢看。其实这就是讲求“按需加载”而已！

安装vue-router插件

npm install vue-router

首先，用VUE的话，你需要安装个vue-router插件。这很容易，找个命令行窗口，敲打几个命令就能搞定。装好后稍等片刻就行，抓紧时间去做其他事情！

引入vue-router插件

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

首先嘞，别忘了在我们的Vue项目里装上vue-router这个插件哈（多数时候就是那个叫作main.js的小文件啦）。不然的话，后续的步骤可就走不通咯！所以，还是得按着顺序来做，遵守代码规则才是最靠谱的！

定义路由组件

马上就能学会怎样用路由组件搭建网页！对于想要搞定整个网页或者想尝试下Vue懒加载的你来说，简直是个神器！赶紧看看实例教程，一起来动手实践~

// 定义懒加载的路由组件
const Home = () => import('./components/Home.vue')
const About = () => import('./components/About.vue')
const Contact = () => import('./components/Contact.vue')
// 定义路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]
// 创建路由实例
const router = new Router({
  mode: 'history',
  routes
})

挂载路由实例到Vue应用程序

搞定！最后这步，千万别掉链子~把路由器实例插入到Vue应用里去。搞定以后，赶紧存盘。没错儿，我们已经把Vue中的路由懒加载给实现了

注意事项

记得把每个 Route 组件都做成懒加载！这样就能减少第一次加载的时间，页面也就更快拉。

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

总结与展望

学习了怎么用Vue搞懒加载哒！就这样用async组件规则把路由组件改成动态加载，这样加载起来更快，看着也更爽！希望大家能从这个易懂好上手的教程中受益良多~