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

  • 相关阅读:
    数据库连接JOIN
    Java面试金典
    Collections.sort详解
    Java复合优先于继承
    js算术运算符与数据类型转换
    js数组类型
    js对象类型
    CSS-API(CSS编程接口),CSSOM(css对象模型)
    从零开始--单片机十字路口交通灯控制实验
    matlab用双重循环实现费诺编码
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/10421786.html
Copyright © 2011-2022 走看看