vue 路由懒加载 resolve vue-router配置

vue 路由懒加载 resolve vue-router配置

使用方法1:  

这是异步加载代码的旧写法.

1	component:resolve => require(['@/pages/About'],resolve)      //"@"相当于".."

 

使用方法2：

你可以改写成以下比较容易理解的写法.

component: () => import('@/page/index')

懒加载

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。

你可以打包的时候看看目录结构就明白了，生成了多个js文件， 如下图：

 

只生成了一个Vendor.js：