• 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。
    你可以打包的时候看看目录结构就明白了。

  • 相关阅读:
    饿了么 PostgreSQL 优化之旅
    kubernetes 滚动更新发布及回滚
    kubernetes yaml
    mongodb安装
    node.js安装
    linux输出换行
    把token放入请求头
    $.ajaxSetup
    js前端读取文件内容
    v-echarts安装
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/10421786.html
Copyright © 2020-2023  润新知