vue2组件实现懒加载浅析(2)

import Router from 'vue-router'; import Vue from 'vue'; Vue.use(Router); export default new Router({ routes: [ { mode: 'history', path: '/home', name: 'home', component: resolve => require([URL], resolve),//懒加载 children: [ { mode: 'history', path: '/home/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/store', name: 'store', component: resolve => require(['../page/store/store.vue'], resolve),//懒加载, children: [ { mode: 'history', path: '/store/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/my', name: 'my', component: resolve => require(['../page/my/my.vue'], resolve),//懒加载, children: [ { mode: 'history', path: '/my/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, ] })

（1）首层的路由根组件分别对应的tab页面

（2）根目录后跟着各个子路由页面，子路由采用动态路由配合路由的编程式导航再加上vuex，最优化提高开发效率

直接贴上代码：

/** * Created by ZHANZF on 2017-3-20. */ //vuex配置 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { //路由组件存储器 routers: {} }, getters: { routers: state => { return state.data; } }, mutations: { //动态增加路由 addRouter: (state, data) => { state.routers = Object.assign({}, state.routers, { [data.name]: data.component }); } }, actions: { acMethods({commit}) { } }, }) //根目录中注册路由组件 window.midea = { registerRouter(name, component) { Store.commit('addRouter', { name: name, component: component }) } };//页面使用路由导航 openAnyPage() { midea.registerRouter('module', resolve => {require(['../module/module.vue'], resolve)});//懒加载 this.$router.push({path: '/home/module', query: {title: this.title}}); }

//页面中使用动态组件 <template> 　 　<component :is="currentRouter" :moduleName="title"> </component> </template> <script src="https://www.jb51.net/article/any.js"> export default { data () { return { routeName: '', currentRouter: '', title: '', } }, created() { this.routeName = this.$route.params.name; this.title = this.$route.query.title; this.currentRouter = this.$store.state.routers[this.routeName]; }, methods: { } } </script>