vue2组件实现懒加载浅析

优点：（1）合理解决首页延迟显示问题

       　（2）能够最大化的减少http请求， 且做其他他路由界面的显示效果最佳

缺点：（1）还是需要团队交流，建立合理区分各种加载方式的组件文件夹

七、采用第三种方案进行目录结构设计

八、具体代码实现设计

1、路由设计：

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}) {								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页