目录

vue动态加载组件请求后端获取需要加载的组件文件名

目录

vue动态加载组件(请求后端获取需要加载的组件文件名)

怎么总是给我这个只学了一个月vue的人提些奇怪的要求?

要求:前端页面跳转时,通过路由地址区别,请求后端不同接口,后端接口返回相应组件的vue文件地址,前端根据这个(些)地址加载对应组件到前端

主要用到的就是component中的is来实现

上代码:

<template>
	<div>
		<component :is="apps" :data="data" @componentResult="componentResult" />
	</div>
</template>
<script>
	import { test } from '@/api/test';
	export default {
		data() {
			return {
				apps: "",
				data: null,
			}
		},
		created() {
			this.loadComponent();
		},
		methods: {
		//test方法是一个请求后端的方法
			test().then(res => {
				this.apps = ()=> import(res.result);
			});
		},
	}
</script>

只在这里写个例子,具体的按需修改即可