vue 和 webpack 配合使每个或几个路由打出单独的js, 而且每个路由页面是有公用区域的

Question

有前端react开发经历和后端基础，最近在学vue,但对于webpack 打包及 Vue 的模板父子组件传参了解尚浅。
如图， 这是 我学习人家的 vue+node+mysql 项目 ， 其默认用的是所有页面打包在一个 index.js 里面，用的hash路由，但考虑到后台页面很多，我想用pushState的路由方式且每个或几个路由都打出单独的js文件，即访问某页面才加载该页面的js文件。

我用vue-router总是出现所有路由文件打成了一个js，只好弃用，笨笨地使用好几个new HtmlWebpackPlugin(conf) 的方式打出了不同的页面， 但是这些页面的独有内容无法放在同一个公共模板下。

这是需要嵌入特有路由内容的公共模板文件：

这是某个路由文件，我不知道怎么把这个路由特有内容传递给公共模板

有哪些大侠遇到过此类问题或者有类似解决方案的项目链接，欢迎向我抛来，感激不尽~

Answer 1

看到你写的pushState，你是用的原生js api吗，没用vue-router?

其实第一张配图后面的内容都没看懂。然后不知道vue 路由懒加载搜出来的东西是你想要的不。

Answer 2

很感谢 toBeTheLight 的提点，经过多方尝试后，在总路由入口router.js中使用 const Admin = () => import('../components/admin.vue')， 的方式, 使打出来既有公用的index.js, 又有在访问相应路由时才加载的各个页面js. 要注意const Admin = () => import('../components/admin.vue') 这句话中的import要想被正确解析，需要引入babel的一种插件 syntax-dynamic-import
图片描述

Answer 3

我也是新手 没太看懂

如果是vue－cli搭建的spa项目

1.父组件设置<router-view/> 路由不同显示内容不同，配合设置router.js

2.子组件向父组件通过 this.emit('fn_name','第二个参数传参，可以在父组件用fn_name($event)接受,如果触发父组件方法，可以不传此参数')

父组件中<child @fn_name='fn_name'></child> 子组件调用父组件fn_name函数
传参的话用':'符号代替‘@’

Answer 4

如果是SPA的话，就只能打包到一个文件里面，因为，除了你空荡荡的index.html文件。剩下的操作基本上都在index.js里面，所以你说的按照路由去加载不同的js，这怕是难到了webpack，如果你是多页应用，我记得webpack有多页应用的打包插件，会使你的html和js单独打包，不会打包其他页面的js文件