zoukankan      html  css  js  c++  java
  • component: resolve => require(['../pages/home.vue'], resolve)

    component: resolve => require(['../pages/home.vue'], resolve)

    vue 路由的懒加载

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    // "@"相当于".."
    import Detail from '../pages/goodsDetail'
    import Msg from '../components/message.vue'
    // 使用路由
    Vue.use(VueRouter)
    export default new VueRouter({
      mode: 'history',
      routes: [
        {
          // 进行路由配置,规定'/'引入到home组件
          path: '/',
          component: resolve => require(['../pages/home.vue'], resolve),
          meta: {
            title: 'home'
          }
        },
        {
          path: '/msg',
          component: Msg
        },
        {
          path: '/detail',
          component: Detail,
          children: [
            {
              path: 'msg',
              component: Msg
            }
          ]
        }
      ]
    })
     component: resolve => require(['../pages/home.vue'], resolve),
    

    如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
    当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
    你可以打包的时候看看目录结构就明白了。

  • 相关阅读:
    基于雪花算法的单机版
    Spring cloud gateway自定义filter以及负载均衡
    logback转义符与MDC
    录音地址文件保存
    maven加载本地jar
    ES Log4J配置信息
    java线程池
    openstreetmap的数据下载
    php更新版本后(路径更改后)要做的调整
    重启IIS
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/10421786.html
Copyright © 2011-2022 走看看