Vue（）创建后如何加载组件

Question

我有一个用例，不确定使用Vue是否可以完成。如果有人可以向我指出文档或示例，则将有所帮助。

因此，我正在构建一个UI，该UI不会事先知道所有组件（以便在初始Vue对象创建之前对其进行注册）。基本上，流程如下：

1. 用户进入站点
2. 站点检查用户是否需要登录（即记住我或本地存储中仍然有效的JWT令牌）。
3. 如果需要登录，请显示登录页面（组件）
4. 登录后，或者如果用户不需要登录，请查询服务器以获取该用户有权访问的模块/插件的列表。
5. 当ajax请求返回时，遍历返回的对象数组并动态加载所有组件并显示接口。这不仅需要动态加载插件（不会提前知道），而且还需要更新路由器以包括这些组件所需的路由。

这可能是开箱即用吗？

在此先感谢您的帮助。

Answer 1

Vue具有实现目标所需的一切。您可以根据计算结果使用vue dynamic component决定加载哪个组件。 然后您的模板将包括：

<component :is="DynamicComponentName" ></component>

另一种工具是v-if，该工具使组件仅在Ajax返回后的之后呈现：

<template>
<div>
     <list-component v-if="listIsFetched" :data="listData"></list-component>
   //this component will be rendered only after we have the listData
</div>
</template>

<script>

export default {
import listComponent from 'what/ever/listComponent.vue'
    name: 'landingPage',
    data(){
        return {
            listData:undefined,
            listIsFetched:false
        }
    },
    components:{listComponent},
    created(){
        this.fetchList();
    },
    methods:{
        fetchList(){
            axios.get('list/data/url').then(response=>{
                this.listData=response.data;
                this.listIsFetched=true
            })
        }
    }
}
</script>

还可以动态加载组件和路由。只需看看docs