vue路由懶加載：import() 和 require()

懶加載：又叫延時加載，即在需要的時候進行加載，隨用即載
【相關問題】import() webpack4懶加載使用變量報錯解決：https://www.cnblogs.com/chenxi188/p/13662036.html

import和require的區別

node編程中最重要的思想就是模塊化，import和require都是被模塊化所使用。

遵循規范

• require 是 AMD規范引入方式
• import是es6的一個語法標准，如果要兼容瀏覽器的話必須轉化成es5的語法

調用時間

• require是運行時調用，所以require理論上可以運用在代碼的任何地方
• import是編譯時調用，所以必須放在文件開頭

本質

• require是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量
• import是解構過程，但是目前所有的引擎都還沒有實現import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼為ES5再執行，import語法會被轉碼為require

對import路由懶加載的了解

如果使用上述的方法，頁面一加載就會執行 import Login from '@/views/login'， 相當於編譯執行了加載組件

使用路由懶加載的寫法，只會在進入當前這個路由時候才會走 component ，然后在運行import編譯加載相應的組件

可以理解也是為通過Promise的resolve機制。因為Promise函數返回的Promise為resolve組件本身，而我們又可以使用import來導入組件

import會返回一個Promise對象

使用懶加載的原因：

像vue這種（spy）單頁面應用，如果沒有使用到懶加載，webpack打包的文件過大，造成進入首頁時，加載的資源過多，時間過長，即使做了loading也不利於用戶體驗，而運用懶加載可以將頁面進行划分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載事件，簡單來說就是進入首頁不用一次加載過多資源造成時間過長

懶加載的使用方法：

ES 提出的import方法，（------****最常用------）方法如下：const HelloWorld = （）=>import('需要加載的模塊地址')

　　（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const HelloWorld = () => import("@/components/HelloWorld") 
const HelloWorld = () => import('../components/HelloWorld') //推薦這種 簡潔直觀
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

vue異步組件實現懶加載 方法如下：component：resolve=>(require(['需要加載的路由的地址'])，resolve)

    import Vue from "vue";
    import VueRouter form "vue-router";
    Vue.use(VueRouter);
    
    export default new Router({
          mode:"history",
          routes:[
               {
                  path: '/',
                  name: 'HelloWorld',
                  component: resolve=>(require(["../components/HelloWorld"],resolve))
               },
               {
                  path:'/Aboutus', //有children的不寫name
                  meta: {
                      title: '關於我們'
              },
                  children:[
              {
                  path:'', //默認子路由 name寫在默認子路由
                  name:'Aboutus',
                  component:resolve=>(require(["../components/Study"],resolve))
              },
              {
                  path:'/Study',
                  name:'Study',
                  component:resolve=>(require(["../components/Study"],resolve))
              },
              {
                  path:'/Work',
                  name:'Work',
                  component:resolve=>(require(["../components/Work"],resolve)),
                  meta:{
                    title:'work'
              }
            },
        
          ],
              component:Aboutus
            },
              
          ]
      })

index.js

import Vue from 'vue';
import Router from 'vue-router';
import routers from './router';
const router = new Router({
  routes: routers
})

router.js:適用后台管理（頭部底部固定 左側菜單 右側內容點擊）

export default [
    {
        path: "/",
        redirect: "/Login",
    },
    {
      path: '/Login',
      name: 'Login',
      component: (resolve)=>require(["../Pages/Login/Login.vue"],resolve),
      meta:{
         title:'xx' 
      }
    },
    {
        path: '/Test', //和login同級 全新內容頁面 不放在路由嵌套里面
        name: 'Test',
        component: (resovle) => require(["../Pages/Test/Test.vue"], resovle),
        meta: {
            requireAuth: true,
            title: 'xxxx'
        },
    },
    {
      path:'/Home', //頭部導航內容固定 就嵌套加左邊內容嵌套
      //name:'Home', //有children 不需要寫name
      component:(resolve)=>require(["../pages/Home/Home.vue"],resolve),
      meta:{
          requireAuth:true,
      },
      children:[
        {
            path:'/',
            //name:'welcome', //需要左邊菜單固定 就接着嵌套加右邊內容
            //有children 不需要寫name
            component:(resovle)=>require(["../pages/Home/welcome/welcome.vue"],resovle),
            meta:{
              requireAuth:true,
              title:'xxx'
            },
            children:[
                {
                  path:'', //默認子路由
                  name:'welcome',
                  component:welcomehome
                },
                {
                  path:'/welcomehome', // 右側內容
                  name:'welcomehome',
                  component:                    (resovle)=>require(["../pages/home/welcomehome/welcomehome.vue"],resovle),
                  meta:{
                    requireAuth:true,
                    title:'xxx'
                  },
                },
            ]
        },
        
      ]
    },
   
    {
      path: "*",
      name: "error_404",
      meta: {
        title: "404"
      },
      component: (resolve) => require(["../error-page/404.vue"], resolve)
    }
  ]
 
頁面：記得加
<div class="nav-right">
        <router-view></router-view>
</div>