vue动态路由初探

从老A / AG-Admin这个里面，老A用的是
vue-element-admin的后台框架
我看到的动态路由的写法，但是我自己亲自尝试，连一个登陆页面也出不来。
在Vue2项目构建心得，我也看到了同样的构建方法
懒加载的目的不言而喻

先看看_import_development.js中的内容

module.exports = file => require('@/views/' + file + '.vue')

再看看_import_production.js中的内容

module.exports = file => () => import('@/views/' + file + '.vue')

初看这两段代码，看不懂是啥意思
1 箭头函数
可以参考ES6中的箭头函数的定义和调用方式，很容易理解他是做什么的，只要多加练习就可以了。
2 module.exports
一般导出一个属性或者对象用 export default
一般导出模块或者说文件使用 module.exports，这里是加载文件，所以用 module.exports
配置完毕后，页面没有能加载成功模板，而且还有这样的错误
Failed to mount component: template or render function not defined.

从一个奇怪的错误出发理解 Vue 基本概念，这篇文章给的解决办法是webpack 配置中的 resolve 属性对象中添加如下 alias 设置。但是这个版本应该比较低，新版本不是这么解决的。

module.exports = {
  // ... other options
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  // ... other options
}

vue2: template or render function not defined(试过很多办法了)，这篇文章提到

补充一下，我猜是vue-loader升级到了13.0导致的
vue-loader13.0有一个变更就是默认启用了esModule
相关信息可参考这里

我核对后，确实我的vue-loader版本与老A / AG-Admin版本不一样,我的是"vue-loader": "^13.3.0",但是vue-element-admin的版本是13.5.0，看来问题也不在此.最后找到问题所在了
vue-loader在13.0.0+的版本，_import_development.js写法有所不同

module.exports = file => require('@/views/' + file + '.vue').default

如此界面终于出来了。

猜你喜欢