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

  • 相关阅读:
    基于简单工厂模式的计算器程序
    Android网络请求之OkHttp框架
    利用Volley框架实现手机号归属地查询
    Android网络请求之HttpURLConnection/HttpClient
    HDU4001 最长上升子序列
    xml易混淆的几组属性
    HDU2444 二分图
    HDU2018 斐波那契
    HDU1427 速算24点
    工厂模式
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/10421786.html
Copyright © 2011-2022 走看看