几种路由懒加载实现方式

2022-03-31 19:03:41 阅读：449 来源： 互联网

路由懒加载

两种方式： 1..Vue异步加载技术

    1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
    2：component: resolve => require(['放入需要加载的路由地址'], resolve)

  {
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
    }

2.ES6推荐方式imprort ()

    1：直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
    2：推荐使用这种方式，但是注意wepack的版本>2.4
    3：vue官方文档中使用的也是import实现路由懒加载
    4：上面声明导入，下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        {
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})

标签：vue,..,Aoo,几种,import,Foo,路由,加载
来源： https://www.cnblogs.com/kira2022/p/16083520.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

几种路由懒加载 实现方式

几种路由懒加载实现方式