vue2组件实现懒加载浅析

2020-06-16 06:17:05易采站长站整理

}

},

})

//根目录中注册路由组件

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="./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>