应用场景:
由路由跳转到当前组件,动态展示不同内容,由于页面展示内容不同,需引入子组件且不确定子组件是哪个,
解决方案:
通过路由传递参数标识,匹配组件路径
在当前页面使用对象存储子组件路径,匹配标识
应用vue的components标签进行动态展示组件,
- html部分
<template>
<div>
<components class="content" :is="component" v-if="component" />
</div>
</template>
- js部分
<script>
// 使用对象存储子组件路径
const compileRoutList={
'tip':'./component/demo.vue'
}
export default {
data() {
return {
compileRoutList,
};
},
computed: {
component() {
return ()=>import(`${this.compileRoutList[this.$route.query.compileRout]}`)
},
},
};
</script>
- 页面展示情况