几种路由懒加载 实现方式

路由懒加载

两种方式: 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
        }
    ]
})

 

posted @ 2022-03-31 18:46  Kira的学习笔记  阅读(3500)  评论(0编辑  收藏  举报