vue 路由懶加載 resolve vue-router配置

使用方法

component:resolve => require(['@/pages/About'],resolve)      //"@"相當於".."

 

懶加載

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
 
export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:resolve => require(['@/pages/About'],resolve)
    },
    {
      path: '/index',
      name: 'Index',
      component:resolve => require(['@/pages/Index'],resolve)
    },
    {
      path: '/product',
      name: 'Product',
      component:resolve => require(['@/pages/Product'],resolve)
    }
  ]
})

 

非懶加載

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/pages/About'
import Index from '@/pages/Index'
import Product from '@/pages/Product'
Vue.use(Router)
 
export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:About
    },
    {
      path: '/index',
      name: 'Index',
      component:Index
    },
    {
      path: '/product',
      name: 'Product',
      component:Product
    }
  ]
})

 

如果用import引入的話，當項目打包時路由里的所有component都會打包在一個js中，造成進入首頁時，需要加載的內容過多，時間相對比較長。
當你用require這種方式引入的時候，會將你的component分別打包成不同的js，加載的時候也是按需加載，只用訪問這個路由網址時才會加載這個js。
你可以打包的時候看看目錄結構就明白了。