雅荷心语博客今天想到一个方案, 想动态加载不同的组件, 尝试了几种办法,
先看看官方文档说: https://cn.vuejs.org/v2/guide/components-dynamic-async.html
这里的异步组件工厂函数也可以返回一个如下格式的对象：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：`Infinity` timeout: 3000 }) |
大概看明白了, 然后我们尝试一下, 上才艺:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<style lang="less" scoped></style> <template> <div class="page"> <component v-bind:is="componentFile" /> </div> </template> <script> /** 名片定制 * Created by iyahe@qq.com * Date: 2021/4/3 * Time: 12:25 * Description: */ export default { name: "index", mixins: [], data() { return { componentFile: null } }, computed: {}, watch: {}, components: {}, methods: { async render () { const pathName = await this.getName(); this.componentFile = () => ({ component: import(`./${pathName}`), loading: { template: '<div>组件加载中</div>' }, error: { template: '<div>组件加载错误</div></div>' }, delay: 200, timeout: 10000 }); }, async getName(){ return new Promise(resolve => { setTimeout(_=>{ resolve('page/auto') }, 1000) }) } }, async created() { await this.render() }, mounted() {} } </script> |
通过setTimeout模拟一个异步获取组件名称, 然后加载组件!
