Vue-router懒加载
来源：互联网 发布：甬温线动车事故 知乎 编辑：程序博客网 时间：2024/06/05 07:53
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 = falseconst 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>
0 0
