Vue-router懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Hello = resolve => {
    require.ensure(['./../page/hello/hello'], () => {
            resolve(require('./../page/hello/hello'))
        }),
        'hello'
}
const Info = resolve => {
    require.ensure(['./../page/info/info'], () => {
            resolve(require('./../page/info/info'))
        }),
        'info'
}
const Login = resolve => {
    require.ensure(['./../page/login/login'], () => {
            resolve(require('./../page/login/login'))
        }),
        'login'
}
const Tab = resolve => {
    require.ensure(['./../page/tab/tab'], () => {
            resolve(require('./../page/tab/tab'))
        }),
        'tab'
}
export default new VueRouter({
    routes: [
        { path: '/', redirect: '/index' },
        {
            path: '/index',
            name: 'hello',
            component: Hello,
        },
        {
            path: '/info',
            name: 'info',
            component: Info,
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
        },
        {
            path: '/tab',
            name: 'tab',
            component: Tab,
        }
    ]
}) 

//写好router.js之后，就要使用啦

//mian.js

import Vue from 'vue'
import router from './router/router'
import store from './store/store'
import App from './App'
//Vue.config.productionTip = false

const app = new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

//app.js

<template>
  <div id="app_vue">
    <transition name="router-fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <div style="height:1rem;"></div>
    <footer-nav  v-show="footerShow"></footer-nav>
  </div>
</template>