极简Vue的异步组件函数

qylost 发布于2019-08-30 15:54 / 920人阅读

摘要：默认值是然后修改这样在获取到之前就会有自定义的展示了但是路由很多我们不可能每个路由都写一个所以编写一个函数来解决新建一个这里官网可以知道具体有哪些参数可以设置然后修改一下这样一个极简的异步函数就完成了

export default new Router({
  routes: [
    {
      path: "/live",
      name: "live",
      component: () => import("@/view/live/live.vue")
    }
  ]
})

上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue
但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决

新建一个 loadable.vue





然后修改router.js

export default new Router({
  routes: [
    {
      path: "/live",
      name: "live",
      component: import("loadable.vue")
    }
  ]
})

这样在获取到live.vue之前就会有自定义的loading展示了
但是路由很多, 我们不可能每个路由都写一个 loadable.vue, 所以编写一个函数来解决

新建一个 loadable.js

import LoadingComponent from "./load.vue"

export default (asyncComponent) => {
    const Com= () => ({
        // 这里vue官网可以知道具体有哪些参数可以设置
        // https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81
        component: asyncComponent(),
        loading: LoadingComponent
    })
    return {
        render (h) {
          return h(Com, {})
        }
    }
}

然后修改一下router.js

import loadable from "loadable.js"
export default new Router({
  routes: [
    {
      path: "/live",
      name: "live",
      component: loadable (() => import("@/view/live/live.vue"))
    }
  ]
})

这样一个极简的vue异步函数就完成了

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116917.html

极简Vue的异步组件函数

摘要：默认值是然后修改这样在获取到之前就会有自定义的展示了但是路由很多我们不可能每个路由都写一个所以编写一个函数来解决新建一个这里官网可以知道具体有哪些参数可以设置然后修改一下这样一个极简的异步函数就完成了 export default new Router({ routes: [ { path: /live, name: live, comp...

gaomysion 2019-08-22 18:50 评论0 收藏0
极简Vue的异步组件函数

摘要：默认值是然后修改这样在获取到之前就会有自定义的展示了但是路由很多我们不可能每个路由都写一个所以编写一个函数来解决新建一个这里官网可以知道具体有哪些参数可以设置然后修改一下这样一个极简的异步函数就完成了 export default new Router({ routes: [ { path: /live, name: live, comp...

jackzou 2019-08-02 10:57 评论0 收藏0
Vue组件-极简的地址选择器

摘要：一前言本文用完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。但是这其实也有无法监控的数据。一、前言本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。 showImg(https...

blastz 2019-08-29 15:32 评论0 收藏0
Vue组件-极简的地址选择器

摘要：一前言本文用完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。但是这其实也有无法监控的数据。一、前言本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。 showImg(https...

shixinzhang 2019-08-26 11:54 评论0 收藏0