vue异步组件和vue.router异步加载

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue异步组件和vue.router异步加载相关的知识,希望对你有一定的参考价值。

以前在使用angular进行开发时,始终没有处理好异步加载的问题,最多只能使用requirejs异步加载controller里面的内容。导致后来项目扩大的时候,性能问题十分蛋疼。最后我竟然把单页面引用拆成了多页面应用,感觉好囧。。。

后来尝试用vue写一个项目,配合则webpack,发现效果相当的好。但是vue的异步组件文档太误导人了,让我尝试了好久才发现怎么用。文档上是这样写的:

Vue.component(‘async-webpack-example‘, function (resolve) {
  // 这个特殊的 require 语法告诉 webpack
  // 自动将编译后的代码分割成不同的块,
  // 这些块将通过 ajax 请求自动下载。
  require([‘./my-async-component‘], resolve)
})

 这里直接用require是错误的, Webpack 的代码分割功能中对于AMD方式的模块加载其实是用的require.ensure.由于1.x版本还不支持ES6的module,所以想要这里vue不能用ES6写了。

Vue.component(‘asyncUserModal‘, function (resolve, reject) {
     require.ensure(["../modal/user-modal.vue"], function (require) {
          
          resolve(require("../modal/user-modal.vue"));
     });
});

但是这里还是有一个非常麻烦的问题,那就是我找了很多地方都没有看见动态加入子组件的方法,这会导致父子组件的事件通信无法触发。所以最后我只能把组件作为全局组件。

new Vue({
    el: ‘#js-modal-wrap‘,
    data: function(){
         return {};
    }      
});

这种写法让人十分不爽,不知道有没有知道vue是否提供一种parentComponent.appChildComponent()之类的方法。如果知道,求告知。

上面这种异步组件可以用在我点击登录时,才去加载登录组件,这样就可以减少首屏请求内容过多的问题。

下面还有一种就是在单页面应用中,我们从首页进入其他页面的时候异步加载其他页面内容。这个在vue-router中有类似的方法。

router.map({
  ‘/‘:{
    name:‘home‘,
    component:home
  },
  ‘/video/:videoId‘:{
    name:‘player‘,
    component:function(resolve){
      require.ensure([‘./pages/player/player.vue‘], function(){
        resolve(require("./pages/player/player.vue"));
      });
    }
  }
}

在我个人看来,vue确实是一种非常不错的框架,目前看来是angular1.x的一种不错的代替方案。当然我也遇到一些奇怪的问题,还不知道是我没找对方法还是BUG,比如在vue-loader中使用less,会导致css的背景图无法加载。还有一个就是使用webpack的问题也挺麻烦的,就是很多第三方库使用闭包的时候都是IIFE,直接使用this代替window以便于在浏览器和nodejs端都能很好的运行。但是打包过后,this直接被webpack打包成undefined了。可能是我英语不好加上没有系统看webpack文档。不知道有没有人遇到这个问题?

以上是关于vue异步组件和vue.router异步加载的主要内容,如果未能解决你的问题,请参考以下文章

vue 异步组件

vue异步组件

Vue Router 进阶笔记

Vue.js 子组件的异步加载及其生命周期控制

vue 异步组件 (按需加载)

Vue Router 路由守卫:完整的导航解析流程