vue路由 routers的寫法：require用與不用

vue路由的寫法有不少種，這裏我只說routers的寫法，一種是compcomponent後面直接寫路徑，另外一種是用require的方式，來看代碼

import Vue from 'vue'
import Router from 'vue-router'
//首頁==================
//import index from '@/components/index'
//產品中心================
import productCenter from '@/components/productCenter/productCenter.vue'
//商務合做==================
import teamwork from '@/components/teamwork/teamwork.vue'
//諮詢中心=================
import askCenter from '@/components/askCenter/askCenter.vue'
//關於中棋==================
import aboutUs from '@/components/aboutUs/aboutUs.vue'


Vue.use(Router)

export default new Router({
  routes: [
  //首頁
    {
      path: '/',
      name: 'index',
      component:resolve =>require(['index'],resolve)
    }
    //產品中心
    ,{
      path: '/productCenter',
      name: 'productCenter',
      component: productCenter
    }
    //商務合做
    ,{
      path: '/teamwork',
      name: 'teamwork',
      component: teamwork
    }
    //諮詢中心
    ,{
      path: '/askCenter',
      name: 'askCenter',
      component: askCenter
    }
    //關於咱們
    ,{
      path: '/aboutUs',
      name: 'aboutUs',
      component: aboutUs
    }
  ]
})

首先先說明一點，import引入時用到的「@」就至關於「..」；

第二點，重點來了，咱們看到index頁面是用的require的方式寫的路由，因此上面的import就註釋掉了，這種寫法的好處，不單單是簡單，還有這樣寫是按需加載，訪問此路由時才加載這個js，會避免進入首頁時加載內容過多，由於import引入，當項目打包時路由裏的全部component都會打包在一個js中，而用require會將你的component分別打包成不一樣的js。