美文网首页
vue 组件懒加载(按需加载)的具体实现

vue 组件懒加载(按需加载)的具体实现

作者: 付出的前端路 | 来源:发表于2018-01-18 18:18 被阅读0次

    目的

    只在访问当前页面时加载对应组件,避免页面组件全部加载。(按需加载)
    ES6

    // 组件名字与按需引入方式
    const Home = () => import(/* webpackChunkName: "home" */ '@/components/page/home/home-index').then(m => m.default)
    const Login = () => import(/* webpackChunkName: "login" */ '@/components/page/login/login').then(m => m.default)
    

    Require

    const Routers = [
      {
        path: '/',  // 路径
        component: resolve => require(['../components/member/index], resolve)  // 异步加载组件
      },
      {
        path: '/login',
        component: resolve => require(['../components/member/login'], resolve)
      }
    ]
    

    相关文章

      网友评论

          本文标题:vue 组件懒加载(按需加载)的具体实现

          本文链接:https://www.haomeiwen.com/subject/jrfawxtx.html