VUE优化之------懒加载

2019独角兽企业重金招聘Python工程师标准>>>

思路结构：

目录结构设计：

路由设计：

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),//懒加载
                },
            ]
        },
    ]
})

首层的路由根组件分别对应的tab页面，根目录后跟着各个子路由页面，子路由采用动态路由配合路由的动态导航再加上vuex，最优化提高开发效率，易于后期维护。

vuex配置：

//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
        })
    }
};<br><br>//页面使用路由导航

组件：

//页面中使用动态组件 <template> 　　<component :is="currentRouter" :moduleName="title"></component> </template><br><script src="./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>

 

转载于:https://my.oschina.net/wenxingjun/blog/1542033