路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

用法

在routes.js路由文件中引入组件

//原始引入
import Home from '@/pages/Home'

{
    path: "/home",
    component: Home,
    meta: { show: true }
},



//路由懒加载引入
const foo = () => {
  return import('@/pages/Home')
}


{
    path: "/home",
    component: foo,
    meta: { show: true }
},

简化写法：

const foo = () => {
  return import('@/pages/Home')
}


const foo = () => import('@/pages/Home')


即foo为组件

所以可以直接在路由规则中可以这样写
{
    path: "/home",
    component:() => import('@/pages/Home'),
    meta: { show: true }
},

懒加载的好处是：高效（只有在用的时候才调用）