雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

vue 异步动态组件加载方案

2021-04-03 分类:前端之旅 阅读(28) 评论(0)

今天想到一个方案, 想动态加载不同的组件, 尝试了几种办法,

先看看官方文档说: 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模拟一个异步获取组件名称, 然后加载组件!

 

 

分享到:更多 ()

相关推荐

  • PHPstorm 的 Material UI 主题插件收费了, 怎么继续使用主题样式
  • 在线吃瓜, 你们想要的某网红65页PPT/PDF
  • uniapp的usingcomponents定义与用法
  • 泰山VR全景-带你一睹泰山风景-泰山之巅
  • VR全景怎么发?教你使用手机来拍摄VR照片-体验720全景
  • 三种微信小程序VR实现方法
  • 使用ffmpeg.wasm在前端html网页上压缩视频解决方案
  • 要SSR? NUXT项目从初始化到部署服务器流程全记录

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
  • vcard - 二维码名片的格式及扫码导入-雅荷心语博客vcard – 二维码名片的格式及扫码导入2016-05-05评论(2)
2021年4月
一 二 三 四 五 六 日
« 三    
 1234
567891011
12131415161718
19202122232425
2627282930  

最新评论

  • 前端小武 4年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 4年前 (2017-03-03)说:
  • Dawn 5年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 5年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 5年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2021 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer