• component:(resolve) => require是什么意思


    {
      // 进行路由配置,规定'/'引入到home组件
      path: '/',
      component: resolve => require(['../pages/home.vue'], resolve),
      meta: {
        title: 'home'
      }
    }]

    这是异步加载组件,当你访问 / ,才会加载 home.vue。

    路由懒加载的一种写法

    这样写是为了 异步组件

    resolve 就是 promiseresolve 回调,组件加载成功后调用

    因为 webpack 支持多种模块规范语法 所以有很多方式的异步加载:

     AMD 异步

    require(['./a', './b'], function(a, b){
        console.log(a, b)
    });

    commonjs 异步

    require.ensure([], function(require){
        var a = require('./a');
        console.log(a)
    });

    ES 异步

    import('./a').then(a => {
        console.log(a)
    })

    也可以用import

    {
      path: '/',
      component: () => import('../pages/home.vue'),
      meta: {
        title: 'home'
      }
    }

    vue-router中,require代替import解决vue项目首页加载时间过久的问题

    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加载较慢,

    而用require会将component分别打包成不同的js,按需加载,访问此路由时才会加载这个js,所以就避免进入首页时加载内容过多。

    require: 运行时调用,理论上可以运用在代码的任何地方,
    import:编译时调用,必须放在文件开头

    如果使用import方式,还需要安装一个插件
    https://blog.csdn.net/hong10086/article/details/89684772

  • 相关阅读:
    8086汇编--1--通用寄存器和简单汇编指令
    写在前面的吐槽!
    汇编/Debug学习计划
    开篇-引文
    看懂别人的代码,和自己能写代码是两回事
    内存管理
    Flink基本原理及应用场景
    IDEA Maven Dependencies标红报错
    Spark Streaming流式处理
    Kafka
  • 原文地址:https://www.cnblogs.com/niyl/p/13370490.html
Copyright © 2020-2023  润新知