vue-router配置

      最近项目里面用到了vue-router来进行配置路由,发现文档写的还是比较好的,这是前面的简单示例没办法满足现实场景,比如按需加载存放于不同目录的模块,这些就没有办法进行处理了。看过整个文档以后,发现,在动态组件处理部分才能满足需求:

router.map({
  '/async': {
    component: function (resolve) {
      require(['./MyComponent.vue'], resolve)
    }
  }
})

这里有几个注意点,

第一,必须在采用webpack的系统中使用(废话,不然怎么解析.vue)

第二,require必须遵循amd规范

第三,resolve,参数必须传入,不然不会发生渲染。

当配置完成后,可以把此配置文件作为webpack的entry,这样webpack会将require的模块自动打包到输出文件中。

如果需要真的按需加载,一个模块打包出一个文件,则必须配置webpack的output如下:

output: {
        path: './dist',
        filename: '[name].js',
        publicPath: publishPath,
        // 主要是这个
        chunkFilename:"[id].build.js?[chunkhash]"
    },

那么每个模块都会在dist目录下生成一个相应的xx.build.js文件,当路由切换的时候,其实就只是调用对应的文件,这样就相当于按需加载了。

Table of Contents