VUE路由懒加载

为什么需要路由懒加载？

使用懒加载前

import Vue from 'vue'
import Router from 'vue-router'
import find from "../common/find.vue"
import my from "../common/my"
import friend from "../common/friend"
import message from "../common/message"
import unLogin from "../components/unLogin"
import error from "../common/error"
import searchResult from "../common/searchResult"
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes:[
        {
            path:'*',
            component:error,
            meta: {allowBack: false} 
         },
        {
            path: '/',
            name: 'mes',
            component: find,
            meta: {allowBack: false} 
        },
        {
            path: '/my',
            name: 'mes',
            component: my,
             meta: {allowBack: false} 
        },
        {
            path: '/friend',
            name: 'mes',
            component: friend,
            meta: {allowBack: false} 
        },
        {
            path: '/message',
            name: 'mes',
            component: message,
            meta: {allowBack: false} 
        },
        {
            path: '/unLogin',
            name: 'mes',
            component: unLogin,
            meta: {allowBack: false} 
        },
        {
            path: '/search',
            name: 'mes',
            component: searchResult
        }
    ]
})

使用懒加载

import Vue from 'vue'
import Router from 'vue-router'
const find = ()=>import('../common/find.vue')//会动态加载组件
const my = ()=>import('../common/my')
const friend = ()=>import('../common/friend')
const message = ()=>import('../common/message.vue')
const unLogin = ()=>import('../components/unLogin')
const error = ()=>import('../common/error.vue')
const searchResult = ()=>import('../common/searchResult.vue')

Vue.use(Router)
export default new Router({
    mode: 'history',
    routes:[
        {
            path:'*',
            component:error,
            meta: {allowBack: false} 
         },
        {
            path: '/',
            name: 'mes',
            component: find,
            meta: {allowBack: false} 
        },
        {
            path: '/my',
            name: 'mes',
            component: my,
             meta: {allowBack: false} 
        },
        {
            path: '/friend',
            name: 'mes',
            component: friend,
            meta: {allowBack: false} 
        },
        {
            path: '/message',
            name: 'mes',
            component: message,
            meta: {allowBack: false} 
        },
        {
            path: '/unLogin',
            name: 'mes',
            component: unLogin,
            meta: {allowBack: false} 
        },
        {
            path: '/search',
            name: 'mes',
            component: searchResult
        }
    ]
})